How to attach One Event Handler to different Inputs in React JS?

Question

I am new to react js.

I have several inputs in my form and considering controllable input approach in React , I am trying to do the job with one event handler to every other inputs. I took some references in stack overflow and come to this. Still not able to figure it out why I am unable to write inside my input box.

Here is my code.

import React, {Component} from 'react';
import { Grid, Row, Col , Button } from 'react-bootstrap';

class ContactForm extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: '' ,
      email: ''
    };
    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <form>
          <input name="input1"  value={this.state.name}  onChange={this.handleChange}/>
          <input name="input2" value={this.state.email} onChange={this.handleChange} />
          <p>{this.state.name}, {this.state.email}</p>
      </form>
    );
  }
}


export default ContactForm;

Daniel Andrei · Accepted Answer · 2017-09-02 08:42:46Z

1

You're using the name attribute to identify the input, but you're reading the wrong values in the render function, "name" and "email" instead of "input1" and "input2"

You can do this instead:

<input name="input1"  value={this.state.input1}  onChange={this.handleChange}/>
<input name="input2" value={this.state.input2} onChange={this.handleChange} />

or

<input name="name"  value={this.state.name}  onChange={this.handleChange}/>
<input name="email" value={this.state.email} onChange={this.handleChange} />

You'd also have to change this :

this.state = {
  name: '' ,
  email: ''
};

in the constructor if you're using the first option.

answered Sep 2, 2017 at 8:42

Daniel Andrei

2,70417 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

matmiz · Accepted Answer · 2017-09-02 08:45:15Z

0

I would use ref to achieve this:

handleChange(e) {
      const {input1, input2} = this.refs;
      //do what ever you want with the values

  }

  render() {
    return (
      <form>
          <input name="input1"  value={this.state.name} ref="input1" />
          <input name="input2" value={this.state.email} ref="input2" onChange={this.handleChange} />
          <p>{this.state.name}, {this.state.email}</p>
      </form>
    );
  }
}

Also, I would use a submit button, or something like that, instead of an event listener on one or two of the inputs

answered Sep 2, 2017 at 8:45

matmiz

801 silver badge9 bronze badges

Collectives™ on Stack Overflow

How to attach One Event Handler to different Inputs in React JS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related