我有一个简单的react组件,其形式相信可以控制一个输入:
import React from 'react'; export default class MyForm extends React.Component { constructor(props) { super(props); this.state = {} } render() { return ( <form className="add-support-staff-form"> <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/> </form> ) } onFieldChange(fieldName) { return function (event) { this.setState({[fieldName]: event.target.value}); } } } export default MyForm;
运行我的应用程序时,出现以下警告:
警告:MyForm正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制(反之亦然)。确定在组件的使用寿命中使用受控或非受控输入元素
我相信我的输入是有价值的,因此受到控制。我想知道我在做什么错?
我正在使用React 15.1.0
我相信我的输入是有价值的,因此受到控制。
为了控制输入,其值必须与状态变量的值相对应。
在您的示例中,最初没有满足该条件,因为this.state.name没有初始设置。因此,输入最初是不受控制的。一旦onChange处理程序被触发的第一次,this.state.name被设定。此时,满足上述条件,并且认为输入已受到控制。从不受控制到受控制的过渡会产生上述错误。
this.state.name
onChange
通过this.state.name在构造函数中初始化:
例如
this.state = { name: '' };
从一开始就将控制输入,解决问题。有关更多示例,请参见React Controlled Components。
与此错误无关,您应该只有一个默认导出。您上面的代码有两个。