– React 中文文档

您所在的位置：网站首页 › textarea的placeholder默认颜色为什么会很重 › – React 中文文档

– React 中文文档

2024-07-17 22:43| 来源: 网络整理| 查看: 265

陷阱

如果传递了 value 但没有传递 onChange，那么将无法在文本框输入任何内容。当你通过传递 value 来控制文本框时，你需要保证文本框始终具有你传递的值。因此，如果你将一个 state 作为 value 传递，但在 onChange 事件处理程序中忘记同步更新该状态变量，React 将在每次插入字符后将选择框恢复到你指定的 value。

故障排除输入时文本框没有更新

如果传递了 value 但没有传递 onChange，你将在控制台中看到一个错误：

// 🔴 Bug: controlled text area with no onChange handler Console如果在没有提供 onChange 处理程序的情况下向表单字段提供了 value 属性，这将导致文本框只读。如果文本框的内容是可变的，请使用 defaultValue；否则，请指定 onChange 或 readOnly。

正如错误消息所提示的那样，如果你只想指定初始值，请改为使用 defaultValue：

// ✅ Good: uncontrolled text area with an initial value

如果你想使用 state 控制文本框，请指定 onChange 处理程序：

// ✅ Good: controlled text area with onChange setSomething(e.target.value)} />

如果文本框的内容是只读的，请指定 readOnly 属性：

// ✅ Good: readonly controlled text area without on change 当我输入时，文本框光标会跳到开头

如果你想要控制文本框，你应该在 onChange 期间将对应的 state 变量更新为来自 DOM 的文本框的值。

你不应该将它更新为 e.target.value 以外的值：

function handleChange(e) { // 🔴 Bug: updating an input to something other than e.target.value setFirstName(e.target.value.toUpperCase());}

你也不应该异步更新：

function handleChange(e) { // 🔴 Bug: updating an input asynchronously setTimeout(() => { setFirstName(e.target.value); }, 100);}

将 state 同步更新 e.target.value 以解决此问题：

function handleChange(e) { // ✅ Updating a controlled input to e.target.value synchronously setFirstName(e.target.value);}

如果这不能解决问题，有可能是因为每次输入时文本框都从 DOM 中删除并重新添加。同样，如果在每次重新渲染时不小心重置了 state，就会发生这种情况。例如，如果文本框或其祖先组件总是接收不同的 key，或者嵌套使用组件（这在 React 中是不允许的，并且会导致“内部”组件在每次渲染时重新挂载），就会发生这种情况。

收到错误：“A component is changing an uncontrolled input to be controlled”

提供的 value 属性必须在整个生命周期中都为字符串。

你不能一会传递 value={undefined} 一会传递 value="some string"，这会导致 React 不清楚你是想指定受控组件还是非受控组件。受控组件的 value 属性应该始终接收字符串，而不是 null 或 undefined。

如果 value 来自 API 或 state，它可能会被初始化为 null 或 undefined。在这种情况下，要么最初将其设置为空字符串（''），要么传递 value={someValue ?? ''} 以确保 value 是一个字符串。

【本文地址】

– React 中文文档

– React 中文文档

今日新闻

推荐新闻