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

Question

I have two form inputs that I want to have for name and email.

I'm following examples from the React docs ( https://facebook.github.io/react/docs/forms.html ), but I'm not sure how I can distinguish between the two different forms. When I type in the first or second form, the other form receives this.state.value as well.

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>
    )
}

I'm using ES6. Do I need some sort of id to distinguish between the two forms? I tried to have a different value in the constructor (ie email = '' ) but it yielded the same results.

Answer 1

Use a id for each <input/> and while saving it in the state , use the id as the key and the input value as the value .

[Update]

As mentioned in the comments below, I've added the ability to generate unique id s for each instances.

Hope this helps!

 class App extends React.Component{ constructor(props) { super(props); this.ids = { textInput: Math.random().toString(36).slice(-5), emailInput: Math.random().toString(36).slice(-5), } this.state = {} } handleChange(e) { this.setState({ [e.target.id]: e.target.value, }) } input() { return ( <form> <input type="text" value={this.state[this.ids.textInput]} id={this.ids.textInput} onChange={this.handleChange.bind(this)}/> <input type="email" value={this.state[this.ids.emailInput]} id={this.ids.emailInput} onChange={this.handleChange.bind(this)}/> </form> ) } render(){ console.log(this.state) return this.input() } } ReactDOM.render(<App/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 2

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

handleTextChange(e) {
  this.setState({
    textValue: e.target.value
  })
}

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

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

Answer 3

You should store email & value in separate states.

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

And you should change a bit handleChange method

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

Hope it will help you