javascript - React 中如何区分不同的表单输入？

Question

我有两个表单输入，我想输入姓名和电子邮件。

我正在关注 React 文档 ( https://facebook.github.io/react/docs/forms.html ) 中的示例，但我不确定如何区分这两种不同的形式。当我输入第一种或第二种形式时，另一种形式也会收到 this.state.value。

constructor(props) {
    super(props);
    this.state = {
        value: '',
    }
}

handleChange(e) {
    this.setState({
        value: e.target.value,
    })
}

input() {
    return (
        <form>
            <input type="text" value={this.state.value} onChange={this.handleChange.bind(this)}/>
            <input type="email" value={this.state.value} onChange={this.handleChange.bind(this)}/>
        </form>
    )
}

我正在使用 ES6。我是否需要某种 id 来区分这两种形式？我尝试在构造函数中使用不同的值(即 email = '')，但它产生了相同的结果。

Answer 1

您应该将电子邮件和值存储在不同的状态。

this.state = {
    text: '',
    email: ''
}

你应该改变一点handleChange方法

handleChange(e) {
  this.setState({
    [e.target.type]: e.target.value,
  })
}

希望对你有帮助