blocks|key|1339997|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1339998|建议您使用onChange事件处理程序来设置状态值：|1339999|<input+type="text"+name="name"+onChange={+this.onInputChange.bind(this)+}+/>|code-block|syntax|javascript|1340000|基本上，您必须创建一个名为onInputChange()的方法并处理那里的更改。|offset|length|style|CODE|1340001|这只是一个参考，最后，你可能应该参考一个新的教程。我推荐this+one.|1340002|entityMap|0|LINK|mutability|MUTABLE|url|http://www.hackingwithreact.com/read/1/1/begin-at-the-beginning-chapter-one^0|0|0|0|D|F|0|S|9|0|0^^$0|@$1|2|3|-4|4|5|6|X|7|@]|8|@]|9|$]]|$1|A|3|B|4|5|6|Y|7|@]|8|@]|9|$]]|$1|C|3|D|4|E|6|Z|7|@]|8|@]|9|$F|G]]|$1|H|3|I|4|5|6|10|7|@$J|11|K|12|L|M]]|8|@]|9|$]]|$1|N|3|O|4|5|6|13|7|@]|8|@$J|14|K|15|1|16]]|9|$]]|$1|P|3|-4|4|5|6|17|7|@]|8|@]|9|$]]]|Q|$R|$4|S|T|U|9|$V|W]]]]

Yeah, the tutorial is for an older version of ReactJS because <a href="https://facebook.github.io/react/docs/two-way-binding-helpers.html" rel="nofollow">ReactLink is deprecated.</a>

The recommendation is that you use the onChange event handler to set the state value:

<pre><code>&lt;input type="text" name="name" onChange={ this.onInputChange.bind(this) } /&gt;
</code></pre>

Basically, you have to create a method called <code>onInputChange()</code> and handle the change there. 

This is just for reference, in the end, you should probably just refer to a newer tutorial. I recommend <a href="http://www.hackingwithreact.com/read/1/1/begin-at-the-beginning-chapter-one" rel="nofollow">this one.</a>

blocks|key|1254642|text|使用现代React没有简单/混乱的双向数据绑定！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1254643|控制台试图告诉您的是，您应该使用"+value“属性来定义该输入的值，并使用"onChange”属性来定义将触发更改的函数。|1254644|所以，你会有：|1254645|<input+
++type="text"+
++value={name}+
++onChange={(event)+=>+{+onNameChange(event.target.value)}}
/>|code-block|syntax|javascript|1254646|onNameChange方法将导致您的"name“变量更改为输入的新值。|1254647|请注意，onNameChange方法将是您自己定义的方法，它没有什么特别之处；它可以是优雅的，也可以是您想要的。现在，你可能想让它发送一个动作来更新单一的事实来源，即你的应用程序的状态。看看Redux，你还有很多东西要学;-)|offset|length|1254648|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/reactjs/redux^0|0|0|0|0|0|2N|5|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@]|9|@$O|14|P|15|1|16]]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

No easy/messy 2-way data binding with modern React!

What console is trying to tell you is that you should use the "value" property to define the value of that input, and the "onChange" property to define the function that will trigger the change.

So, you'd have:

<pre><code>&lt;input 
 type="text" 
 value={name} 
 onChange={(event) =&gt; { onNameChange(event.target.value)}}
/&gt;
</code></pre>

And it would be the onNameChange method that would cause your "name" variable to change to the input's new value.

Do note, that onNameChange method would be something you have defined yourself, there's nothing special about it; it could be as elegant or hacky as you'd like. Nowadays, you'd probably want to have it dispatching an action that would update the single source of truth that is your app's state. Take a look at <a href="https://github.com/reactjs/redux" rel="nofollow">Redux</a>, you do have a lot of learning ahead of you ;-)

blocks|key|1338750|text|我现在遇到的问题是"valueLink"，控制台说我应该用“|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1338751|”和“onChange”来代替它。有没有人能帮我解决这个问题，似乎react涉及的很多学习都是试图保持在所有不推荐使用的元素之上！|blockquote|1338752|1338753|1338754|Value+Link是设计模式，Facebook不能弃用它。他们只需从React核心中删除该模式的实现即可。通读这篇文章，了解关于该模式的解释：|1338755|https://medium.com/@gaperton/managing-state-and-forms-with-react-part-1-12eacb647112#.5o63wmy72|offset|length|1338756|1338757|没有使用现代React的简单/混乱的双向数据绑定！|1338758|1338759|1338760|你不必使用他们的值链接实现(无论如何它都是非常有限的)。你也不必到处写这些愚蠢的回调函数。本文中介绍的这个功能要强大得多。|1338761|https://www.npmjs.com/package/valuelink|1338762|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|0|0|2N|0|0|0|0|0|0|0|0|13|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|17|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|18|8|@]|9|@$K|19|L|1A|1|1B]]|A|$]]|$1|M|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|N|3|O|5|D|7|1D|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1G|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1H|8|@]|9|@$K|1I|L|1J|1|1K]]|A|$]]|$1|V|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|J]]|12|$5|Y|Z|10|A|$11|U]]]]

<blockquote>
 Ok so the issue I am having is with "valueLink", console says I should be using 'value' and 'onChange' in its place. Could anyone help me out with this issue, seems a lot of the learning involved with react is trying to stay on top of all the deprecated elements!
</blockquote>

Value Link is the design pattern, Facebook cannot deprecate it. They will just remove their implementation of that pattern from the React core. Read through this article for explanation about the pattern:

<a href="https://medium.com/@gaperton/managing-state-and-forms-with-react-part-1-12eacb647112#.5o63wmy72">https://medium.com/@gaperton/managing-state-and-forms-with-react-part-1-12eacb647112#.5o63wmy72</a>

<blockquote>
 No easy/messy 2-way data binding with modern React!
</blockquote>

You don't have to use their implementation of value links (it's very limited anyway). And you don't have to write everywhere these stupid callbacks either. This one, which is presented in the article, is way more powerful.

<a href="https://www.npmjs.com/package/valuelink">https://www.npmjs.com/package/valuelink</a>

I am currently learning ReactJS following a tutorial by the excellent Wes Bos, however I have reached a section regarding 2 way data binding and it seems the method Wes is teaching is now deprecated. I now need to try and find the correct method for the code below or I will not be able to progress with the tutorial..

Ok so the issue I am having is with "valueLink", console says I should be using 'value' and 'onChange' in its place. Could anyone help me out with this issue, seems a lot of the learning involved with react is trying to stay on top of all the deprecated elements!

<pre><code>&lt;input type="text" valueLink={linkState('fishes.' + key + '.name')}/&gt;
</code></pre>

ReactJS - 'valueLink' is deprecated set `value` and `onChange` instead

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我目前正在学习ReactJS，遵循Wes Bos优秀的教程，但是我已经达到了关于双向数据绑定的部分，似乎Wes正在教授的方法现在已经被弃用了。我现在需要尝试为下面的代码找到正确的方法，否则我将无法继续学习本教程。我遇到的问题是"valueLink"，console说我应该用“value”和“onChange”来代替它。...

问ReactJS - 'valueLink‘已弃用，请改为设置`value`和`onChange`
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS - 'valueLink‘已弃用，请改为设置`value`和`onChange`EN