react 如何处理一种形式的多个道具？答案

【问题标题】：How does react handle multiple props from one form?react 如何处理一种形式的多个道具？
【发布时间】：2017-03-27 23:25:08
【问题描述】：

我正在尝试在 2 个不同的反应类之间传递表单的输入值。下面的代码正在运行。用户在表单中输入他们的姓名，单击提交。他们跳转到一个新视图，他们输入的名称存储在状态中，可以作为道具检索。这行得通

<form onSubmit={this.handleClick}>
            <input type="text" id="playerName" value={this.state.name} onChange={this.handleChange} placeholder="name" />
            <input type="submit" value="submit" />
          </form>

if (this.state.results){
      output = <Decision name={this.state.value}/>;
    }

handleChange: function(event){
    this.setState({name: event.target.value})
  },

我的问题是我想知道在表单中添加一个新的输入类型。这次email。但是，我似乎无法用与我不断出错的逻辑相同的逻辑来复制它。

 if (this.state.results){
          output = <Decision name={this.state.value} email={this.state.value}/>;
        }

我尝试添加一个新道具（上图），但是当我在名称字段中输入时，这也会在电子邮件字段中输入文本（可能是因为我正在更新相同的状态）。如何创建电子邮件道具并存储和检索其状态？道具可以像email={this.state.email}一样简单吗？

【问题讨论】：

标签： javascript html forms reactjs state

【解决方案1】：

if (this.state.results){
      output = <Decision name={this.state.value} email={this.state.value}/>;
    }

在这里，您在单一状态下为姓名和电子邮件使用值：值。

您需要声明一个额外的状态来管理电子邮件更改。这看起来像这样：

this.state = {
  nameValue: '',
  emailValue: '',
};

那么你还需要两个不同的handleChange方法。类似于handleNameChange 和handleEmailChange，看起来像这样：

handleNameChange(event) {
  this.setState({nameValue: event.target.value});
}

 handleEmailChange(event) {
  this.setState({emailValue: event.target.value});
}

那么你的输入会变成这样：

 <form onSubmit={this.handleSubmit}>
    Name: <input type="text" value={this.state.nameValue} onChange={this.handleNameChange} />
    Email: <input type="email" value={this.state.emailValue} onChange={this.handleEmailChange} />
    <input type="submit" value="Submit" />
  </form>

最后，您可以像这样将新电子邮件作为道具传递：

if (this.state.results){
      output = <Decision name={this.state.nameValue} email={this.state.emailValue}/>;
    }

这是codepen 上的一个工作示例

【讨论】：