如果设置了 value 属性，我的文本输入如何为空？答案

【问题标题】：How can my text input be empty if the value attribute is set?如果设置了 value 属性，我的文本输入如何为空？
【发布时间】：2018-01-21 19:41:41
【问题描述】：

看看下面的截图。您可以看到文本输入字段为空，但其value 属性设置为“b”。

您还会在“属性”选项卡中的input 下注意到这里的value 设置为“”。为什么它们不同？这是什么意思？

这可能与输入是由 React 呈现的事实有关吗？

如果有帮助，这里是负责此元素的 jsx（已编辑）：

return (
  <td
    key={field._id}
    className={`oldField ${colPos}`}
  >
    <input
      type="text"
      defaultValue={value}
      onChange={this.changeOldField(record, field)}
    />
  </td>
)

【问题讨论】：

first-col 工作正常，它不是由 Reach 渲染的？
我不确定我是否理解您的问题。如果这就是你的意思，一切都是用 React 渲染的。对于first-col、last-col 和oldField，我通过我的jsx 中<td> 标记的className 属性添加了它们（参见我的编辑）。
我刚刚注意到，在“属性”选项卡的“输入”下，defaultValue 设置为“b”，正如预期的那样。只有value 本身不是。然而，自上次 React 渲染以来，我没有更改该字段的值。

标签： html reactjs google-chrome-devtools

【解决方案1】：

您似乎正在根据状态中的某些内容更改 defaultValue。 defaultValue 属性应该只设置一次，以后不要更改，因为 React 将忽略任何更改。如果要根据状态更改值，则应使用正常值道具。否则，如果您希望向用户显示预定义的值，同时在更改时控制输入，您可以在代码中使用一些逻辑来处理 onChange 和组件中想要自动更改的代码该值，或者可能将其放在占位符道具中，这将为您提供您想要的东西。

【讨论】：

如果我使用value而不是defaultValue，则用户无法修改该字段。 placeholder 属性不太好，因为用户无法附加到占位符值。至于“在你的代码中使用一些逻辑来处理 onChange 和你想要自动更改值的组件中的代码”，我不明白你的意思。我在输入上有一个onChange 侦听器，我依靠defaultValue 在状态更改时“自动更改值”。
顺便说一句，onChange 处理程序不会改变状态，其他的会改变。
我通过强制更改 td 的 key 来解决它，现在 React 不会忽略 defaultValue 属性。顺便说一句，React 的这种行为不应该被视为错误吗？