反应 - 改变不受控制的输入

作者: Frui tenebris、
发布时间: 2024-03-31 12:20:54 (26天前)
转自：

9 条回复

0#
回复此人
老夫的少女心吖 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 当你使用的<strong> <code> onChange={this.onFieldChange('name').bind(this)} </code> </强> 在您的输入中，您必须将状态空字符串声明为属性字段的值。 </p> <P> 的<strong> 方式错误： </强> </p> <pre> <code> this.state ={ fields: {}, errors: {}, disabled : false } </code> </pre> <P> 的<strong> 正确方法： </强> </p> <pre> <code> this.state ={ fields: { name:'', email: '', message: '' }, errors: {}, disabled : false } </code> </pre> </DIV>

编辑
1#
回复此人
晴天？霹雳 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在初始状态下将值设置为“name”属性。 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-html lang-html prettyprint-override"> <code> this.state={ name:''}; </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
2#
回复此人
晴天 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在我的情况下，我错过了一些非常微不足道的东西。 </p> <P> <code> <input value={state.myObject.inputValue} /> </code> </p> <P> 当我收到警告时，我的状态如下： </p> <pre> <code> state = { myObject: undefined } </code> </pre> <P> 通过交替我的状态的<strong> 引用我的值的输入 </强> ，我的问题解决了： </p> <pre> <code> state = { myObject: { inputValue: '' } } </code> </pre> </DIV>

编辑
3#
回复此人
Jacob | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果组件上的props已作为状态传递，请为输入标记设置默认值 </p> <pre> <code> <input type="text" placeholder={object.property} value={object.property ? object.property : ""}> </code> </pre> </DIV>

编辑
4#
回复此人
文艺青年 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 在构造函数中将字段值设置为“”（空字符串）的一个潜在缺点是，该字段是可选字段并且未编辑。除非在发布表单之前进行一些按摩，否则该字段将作为空字符串而不是NULL保留到数据存储中。 </p> <P> 这个替代方案将避免空字符串： </p> <pre> <code> constructor(props) { super(props); this.state = { name: null } } ... <input name="name" type="text" value={this.state.name || ''}/> </code> </pre> </DIV>

编辑
5#
回复此人
Autistic | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 另一种方法是在输入中设置默认值，如下所示： </p> <pre> <code> <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/> </code> </pre> </DIV>

编辑
6#
回复此人
biu~ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这通常仅在您在应用程序启动时未控制字段的值时以及在某个事件或某个函数触发或状态更改之后才会发生，您现在正尝试控制输入字段中的值。 </p> <P> 这种无法控制输入然后控制输入的转变是导致问题首先发生的原因。 </p> <P> 避免这种情况的最佳方法是在组件的构造函数中为输入声明一些值。这样输入元素从应用程序的开头就具有值。 </p> </DIV>

编辑
7#
回复此人
谦成 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我知道其他人已经回答了这个问题。但是，这里一个非常重要的因素可能会帮助其他人遇到类似的问题： </p> <P> 你必须要有 <code> onChange </code> 处理程序在您的输入字段中添加（例如textField，checkbox，radio等）。并始终处理活动 <code> onChange </code> 处理程序，如： </p> <pre> <code> <input ... onChange={ this.myChangeHandler} ... /> </code> </pre> <P> 和你一起工作的时候的<strong> 复选框 </强> 那么你可能需要处理它 <code> checked </code> 国家与 <code> !! </code> 喜欢： </p> <pre> <code> <input type="checkbox" checked={!!this.state.someValue} onChange={.....} > </code> </pre> <BLOCKQUOTE> <P> 参考： <a href="https://github.com/facebook/react/issues/6779#issuecomment-326314716" rel="noreferrer"> https://github.com/facebook/react/issues/6779#issuecomment-326314716 </A> </p> </BLOCKQUOTE> </DIV>

编辑

登录后才能参与评论