Обработка нескольких обратных вызовов onChange в компоненте React

Question

Вот как я сейчас обрабатываю сценарий с двумя полями ввода. В качестве отдельного метода обновления для каждого из них. Может ли это сделать с помощью одного метода handleChange?

https://codepen.io/r11na/pen/bZKOpj?editors=0011

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.handleChange1 = this.handleChange1.bind(this); 
    this.handleChange2 = this.handleChange2.bind(this); 

    this.state = { 
     name1: '', 
     name2: '' 
    }; 
    }; 

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

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

    render() { 
    return (
     <div class="row column"> 
     <Label name={this.state.name1}/> 
     <Input onChange={this.handleChange1} /> 
     <Label name={this.state.name2}/> 
     <Input onChange={this.handleChange2} /> 
     </div> 
    ); 
    }; 
} 

const Label = props => (
    <p {...props}>Hello: <span className="label-name">{props.name}</span></p> 
); 

const Input = props => (
    <input placeholder="Enter your name" {...props} type="text" /> 
); 

ReactDOM.render(<App />, document.getElementById('app')) 

Answer 1

Может/это должно быть сделано с помощью одного метода handleChange вместо этого?

Вы можете упростить свой код.

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     name1: '', 
     name2: '' 
    }; 
    }; 

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

    render() { 
    return (
     <div class="row column"> 
     <Label name={this.state.name1}/> 
     <Input onChange={ (e) => this.handleChange(e, 'name1') } /> 
     <Label name={this.state.name2}/> 
     <Input onChange={ (e) => this.handleChange(e, 'name2') } /> 
     </div> 
    ); 
    }; 
} 

Example

---

Благодаря @Alik, что упомянутые о eslint правило jsx-no-bind,

безвыходном вызов или функции стрелка в опору JSX создаст совершенно новую функцию каждый рендер. Это плохо для производительности, так как это приведет к тому, что сборщик мусора будет вызван более чем .

После этого правила вы можете изменить ваш код

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.onChange = { 
     name1: this.handleChange.bind(this, 'name1'), 
     name2: this.handleChange.bind(this, 'name2'), 
    } 

    this.state = { 
     name1: '', 
     name2: '' 
    }; 
    }; 

    handleChange(name, event) { 
    this.setState({ [name]: event.target.value }); 
    }; 


    render() { 
    return (
     <div class="row column"> 
     <Label name={this.state.name1}/> 
     <Input onChange={ this.onChange.name1 } /> 
     <Label name={this.state.name2}/> 
     <Input onChange={ this.onChange.name2 } /> 
     </div> 
    ); 
    }; 
} 

Example