反应如何从一种形式处理多个道具？

问题描述：

我想通过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}一样简单吗？

答

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的一个工作示例

反应如何从一种形式处理多个道具？

相关推荐