Question

为什么我无法使用以下代码输入我的表单？我已将表单值正确设置为州内的数据，但我无法输入。

组件正在更改要控制的电子邮件类型的不受控制的输入。输入元素不应从不受控制切换到受控制（或反之亦然）。决定在组件的生命周期内使用受控或不受控制的输入元素。

construtor()
{
  super(props);
  this.state= { user: {} }
  this.onChange = this.onChange.bind(this);
}

componentWillReceiveProps(nextProps)
{
    this.state.user !== nextProps.user &&
        this.setState({ user: nextProps.user });  
}

onChange(e)
{
    let newUser = this.state.user;
    newUser[e.target.name] = e.target.value;
    this.setState({ user: newUser });
}

<form>
    <input name="email" type="email" className="form-control" value={this.state.user.email} onChange={this.onChange}/>
    <input name="first_name" type="text" className="form-control" value={this.state.user.first_name} onChange={this.onChange}/>
</form>

Answer 1

因为用户变量的默认值为{}且this.state.user.email和this.state.user.first_name最初为undefined，并且因为您最初是在分配：

value = {this.state.user.email or undefined} ==＆gt; this.state.user.email未定义

因此，value属性将具有undefined并且输入字段将变得不受控制，一旦您输入任何值，它将被控制，因为在该用户对象将具有键之后，这就是您收到错误的原因：

组件正在更改电子邮件类型的不受控制的输入控制。

<强>解决方案：

1-在构造函数中定义用户，如下所示：

this.state= { user: {email: '', first_name: ''} }

2-或者像这样输入输入字段（将默认值设为＆＃34;＆＃34;处理未定义的情况）：

<form>
    <input value={this.state.user.email || ""} ..../>
    <input value={this.state.user.first_name || ""} ..../>
</form>

<强>建议：

不要直接改变状态值，所以在进行任何更改之前先复制状态对象然后进行更改，并使用setState更新状态值。

检查此答案：What is the most efficient way to deep clone an object in JavaScript?

当我使用value =＆＃34; this.state.value＆＃34;时，React中的表单元素是不可变的。和onChange

1 个答案: