Question

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

<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}一样简单吗？

Answer 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

上的一个工作示例

如何处理来自一个表单的多个道具？

1 个答案: