Handling multiple inputs in React

This is basic example.

class Login extends Component {

  constructor () {
    super();
    this.state = {
      email: '',
      password: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange (evt, field) {
    // check it out: we get the evt.target.name (which will be either "email" or "password")
    // and use it to target the key on our `state` object with the same name, using bracket syntax
    this.setState({ [field]: evt.target.value });
  }

  render () {
    return (
  <form>

    <label>Email</label>
    <input type="text" name="email" onChange={(event)=>this.handleChange(event, "email")} />

    <label>Password</label>
    <input type="password" name="password" onChange={(event)=>this.handleChange(event, "password")} />

  </form>
);
  }
}

This works because evt is a change event, evt.target is the changed DOM element and evt.target.name is the value of the name attribute of that element.

This means that when you change one of the <input> elements the handleChange function is called and the state's email or password (the names of those two inputs) property is changed to the changed element's value.

{[variable]: value} is just the syntax you use when you want to use a string as a property name in an object literal.

Every input has a name attribute which is used to reference elements in JavaScript, or to reference form data after a form is submitted. Here you are using name and password as names.

this.setState({ [evt.target.name]: evt.target.value })

This is using ES6 Computed property names. evt.target.name takes the name of the input (i.e the evt.target) to which the handler is attached and being called and sets it as the key for your state. So, essentialy each time you change something in the input, your state corresponding to that input's name changes as well.

Keep one thing in mind. You need to keep the initial state names and the names of your input consistent with each other for this to work.

You can always write seperate handlers but that just convolutes the codebase and are essentially doing the same thing. So it is just following the DRY methodology. Might as well use this.

Hope this helps!

for create a state for this, is necessary create a object with any property and set

just behaivor on component an above class with your scheme class and component this is trigger for you response

1. Create an object property

   state = {
    nameForProperty: '',
    anotherNamenameForProperty: ''
   }
   

2. create an event for setState a pass event for function callback onHandleEvent = e => {

           this.setState ({
            [e.target.name]: e.target.value,
           })
              console.log(this.setState)
   
          };
   

3. Call function from input

     <form>
     <input name="namenameForProperty" onChange={this.onHandleEvent} value={this.state.} />
     </form>
   

You can try something like this.

    handleChange (evt) {
      let name = evt.target.name
      this.setState({ [name ]: evt.target.value });
    }

Well, you can also adopt chained arrow function handleChange as handleChange = key => e => { ... } , then use it in input as onChange={this.handleChange('mail')}.

constructor(ops) {
  super(ops)
  this.state={
    prompt: '',
    form: {
      name: '',
      mail: '',
      message: ''
    }
  }
}

handleChange = key => e => {
  let newForm = {
    ...this.state.form,
    [key]: e.target.value
  }
  this.setState({
    form: newForm
  })
}

render() {
  let { name, mail, message } = this.state.form
  return (
    <form action="#">
      <input type="text" value={name} onChange={this.handleChange('name')} className="form-control" placeholder="Name*" />
      <input type="email" value={mail} onChange={this.handleChange('mail')} className="form-control" placeholder="E-mail*" />
      <textarea value={message} onChange={this.handleChange('message')} className="form-control" placeholder="Message"></textarea>
    </form>
  )
}