ReactJS - 不推荐使用“valueLink”设置“value”和“onChange”

IT技术 reactjs
2021-05-18 19:28:49

我目前正在按照优秀的 Wes Bos 的教程学习 ReactJS,但是我已经到达了关于 2 路数据绑定的部分,而且似乎 Wes 教授的方法现在已被弃用。我现在需要尝试为下面的代码找到正确的方法,否则我将无法继续本教程..

好的,所以我遇到的问题是“valueLink”,控制台说我应该在它的位置使用“value”和“onChange”。任何人都可以帮助我解决这个问题,似乎与 React 相关的很多学习都试图掌握所有已弃用的元素!

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

好的,所以我遇到的问题是“valueLink”,控制台说我应该在它的位置使用“value”和“onChange”。任何人都可以帮助我解决这个问题,似乎与 React 相关的很多学习都试图掌握所有已弃用的元素!

Value Link 是设计模式,Facebook 不能弃用它。他们只会从 React 核心中删除他们对该模式的实现通读这篇文章以了解有关该模式的说明:

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

现代 React 没有简单/混乱的 2 路数据绑定!

您不必使用他们的value链接实现(无论如何它都非常有限)。你也不必到处写这些愚蠢的回调。这篇文章中介绍的这个功能更强大。

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

现代 React 没有简单/混乱的 2 路数据绑定!

控制台试图告诉您的是,您应该使用“value”属性来定义该输入的值,并使用“onChange”属性来定义将触发更改的函数。

所以,你会有:

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

并且 onNameChange 方法会导致您的“名称”变量更改为输入的新值。

请注意,onNameChange 方法是您自己定义的方法,没有什么特别之处;它可以像您想要的那样优雅或古怪。如今,您可能希望它调度一个动作来更新应用程序状态的单一事实来源。看看Redux,你确实有很多东西要学;-)

是的,本教程适用于旧版本的 ReactJS,因为ReactLink 已被弃用。

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

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

基本上,您必须创建一个被调用的方法onInputChange()并在那里处理更改。

这仅供参考,最后,您可能应该参考较新的教程。我推荐这个。