javascript - Using a single handleInputChange method to for multiple input fields (React) - Stack Overflow

admin管理员组

文章数量:1435859

I have a form, in React"

render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            value={this.state.first}
          />

          <input
            value={this.state.second}
          />

          <input
            value={this.state.third}
          />
           //.... many more
        </form>
     //...
)}

My handleInputChange usually looks like this:

  handleInputChange(e) {
    this.setState({value: e.target.value });
  }

Now, since I have many different input fields, i would normally do many different handleInputChange methods. However, all of these handle input change things basically do the same: they set the state anew, according to which input field is currently edited.

How could I, instead of writing three handleInputChange methods each doing something like:

  handleInputChangeFirst(e) {
    this.setState({first: e.target.value });
  }
  handleInputChangeSecond(e) {
    this.setState({second: e.target.value });
  }

... do all of this with one single handleInputChange, which then checks which value needs to be updated? How can i let handleInputChange know about the input field that is being edited and react accordingly?

I have a form, in React"

render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
          <input
            value={this.state.first}
          />

          <input
            value={this.state.second}
          />

          <input
            value={this.state.third}
          />
           //.... many more
        </form>
     //...
)}

My handleInputChange usually looks like this:

  handleInputChange(e) {
    this.setState({value: e.target.value });
  }

Now, since I have many different input fields, i would normally do many different handleInputChange methods. However, all of these handle input change things basically do the same: they set the state anew, according to which input field is currently edited.

How could I, instead of writing three handleInputChange methods each doing something like:

  handleInputChangeFirst(e) {
    this.setState({first: e.target.value });
  }
  handleInputChangeSecond(e) {
    this.setState({second: e.target.value });
  }

... do all of this with one single handleInputChange, which then checks which value needs to be updated? How can i let handleInputChange know about the input field that is being edited and react accordingly?

• javascript
• reactjs
• design-patterns
• react-native
• react-redux

Share Improve this question Follow edited May 14, 2017 at 0:04 George Welder asked May 13, 2017 at 23:58 George WelderGeorge Welder 4,0551111 gold badges4545 silver badges7575 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You could have a generic handleInputChange method:

handleInputChange(property) {
  return e => {
    this.setState({
      [property]: e.target.value
    });
  };
}

That you’d use as such:

<input
  value={this.state.first}
  onChange={this.handleInputChange('first')}
/>

Correct me if I'm wrong, but wouldn't the above method return a new function for each render? So if you pass these handlers down to a child ponent then they'd be seen as an updated prop every time instead of the same prop (cause it's a new function every render), and cause an unwanted re-render of the child. One of the reasons inline functions are hated in the render method.

Here's another solution I saw somewhere online:

handleInputChange = event => {
  const { name, value } = event.target;
  this.setState({
    [name]: value
  });
}

And the input element:

<input name="first" value={this.state.first} onChange={this.handleInputChange} />

Name might not be the best attribute to use, but you get the point

本文标签： javascriptUsing a single handleInputChange method to for multiple input fields (React)Stack Overflow