ReactJS - 'valueLink'已被弃用，请使用`value`和`onChange`代替。

Question

我目前正在学习ReactJS，跟随优秀的Wes Bos的教程，但是我遇到了关于双向数据绑定的部分，而Wes教授的方法似乎已经过时了。现在我需要尝试找到下面代码的正确方法，否则我将无法继续进行教程。

好的，所遇到的问题是“valueLink”，控制台显示我应该使用'value'和'onChange'代替它。有人能帮我解决这个问题吗？看来React的很多学习都是试图跟上所有过时的元素！

<input type="text" valueLink={linkState('fishes.' + key + '.name')}/>

- user4831663

Answer 1

好的，我的问题与"valueLink"有关，控制台提示我应该使用'value'和'onChange'代替它。谁能帮我解决这个问题，似乎react的学习中涉及到许多已弃用的元素！

"Value Link"是一种设计模式，Facebook不能废除它。他们只会从React核心中删除其实现该模式的部分。阅读本文以了解该模式的详细说明：

https://medium.com/@gaperton/managing-state-and-forms-with-react-part-1-12eacb647112#.5o63wmy72

现代的React没有简单/混乱的双向数据绑定！

您不必使用他们的实现value links（非常有限），也不必在各处编写这些愚蠢的回调。这个展示在文章中的更为强大。

https://www.npmjs.com/package/valuelink

- gaperton

---

请注意，valuelink 似乎已不再维护。 - MaLiN2223

它非常简单且基本功能齐全，没有需要维护的东西。 - gaperton

也许，根据过去三年使用的经验，我可能会发布这个“最终”版本。 - gaperton

Answer 2

现代React中不存在简单/混乱的双向数据绑定！

控制台试图告诉你的是，你应该使用"value"属性来定义输入框的值，使用"onChange"属性来定义触发变化的函数。

因此，你应该有：

<input 
  type="text" 
  value={name} 
  onChange={(event) => { onNameChange(event.target.value)}}
/>

这将是onNameChange方法导致您的“name”变量更改为输入的新值。

请注意，onNameChange方法是您自己定义的，没有什么特别之处；它可以像优雅或hacky一样。现在，您可能希望它分派一个操作，更新应用程序状态的单个真实来源。看看Redux，您需要学习很多；-)

- Johnny Magrippis

---

为什么要使用额外的箭头函数呢？我会尝试简单地使用 onChange={onNameChange}，事件将自动传递给 onNameChange... 有时候你不需要绑定或使用箭头函数。 - rafaelbiten

当然，你建议的是一个非常有效的选项！我只是觉得让 onNameChange 期望只有值会让事情感觉更直接，更符合旧的双向绑定方法。 - Johnny Magrippis

Answer 3

是的，该教程是针对较旧版本的ReactJS，因为ReactLink已被弃用。

建议您使用onChange事件处理程序来设置状态值：

<input type="text" name="name" onChange={ this.onInputChange.bind(this) } />

基本上，您需要创建一个名为onInputChange()的方法并在其中处理更改。

这只是供参考，在最后，您应该参考更新的教程。我推荐this one.

- vcanales