填充不受控制的反应输入字段的正确方法是什么？答案

【问题标题】：What is the correct way to populate an uncontrolled react input field?填充不受控制的反应输入字段的正确方法是什么？
【发布时间】：2017-02-04 19:04:03
【问题描述】：

defaultValue 仅在页面第一次加载时有效。再次加载同一页面但使用不同的props 时，不受控制的输入字段不会填充来自新props 的新值。似乎没有办法在反应中为不受控制的输入字段设置值？

我正在使用 Material-UI，我不受控制的输入字段看起来像这样：

<TextField
  ref={input => this.dataNode.Name = input}
  defaultValue={this.props.dataNode.Name}
  floatingLabelText="Name"
/>

似乎在输入中添加一个随机的key 可以解决问题，但是，我真的需要为每个不受控制的输入引入一个随机键吗？

<TextField
  key={some_random_thing}
  ref={input => this.dataNode.Name = input}
  defaultValue={this.props.dataNode.Name}
  floatingLabelText="Name"
/>

【问题讨论】：

你的一些代码可能有用:)
你能解释一下吗：When loading the same page again ??你是怎么做的？因为如果更新父组件中的值，子组件肯定会更新。
想想导航菜单。所有菜单项都链接到同一页面，但传入了不同的props。在我的情况下，如果我单击另一个链接到另一个页面，然后返回到表单，则该值会正确填充，但是，如果我导航到同一页面，即使使用新的props，表单仍然具有旧值。
也许我不应该说页面，比如说组件。
在受控（使用value而不是defaultValue）输入的情况下，不存在这样的问题。但是，在我的情况下，我需要使用不受控制的输入。

标签： reactjs

【解决方案1】：

通过添加 key={Math.random()} 解决了问题（已解决）：

<TextField
  key={Math.random()}
  ref={input => this.dataNode.Name = input}
  defaultValue={this.props.dataNode.Name}
  floatingLabelText="Name"
/>

丑！

【讨论】：

【解决方案2】：

事实上，您正在“设置输入”，您正在尝试“控制”输入字段。我会继续并通过额外的几行代码来使其成为受控输入。这并没有什么坏处，而且我认为这实际上是你试图以“反应”思维方式做的事情。

【讨论】：

不，我们谈论的是不受控制的输入。我了解受控输入的工作原理。但我的问题是关于不受控制的输入。
我的意思是，通过设置该值，您正在对输入编号应用某种程度的控制？
您的意思是使用value 而不是defaultValue？如果是这种情况，则输入变为只读。