在React组件中处理多个onChange回调

问题描述：

这是我目前如何处理具有两个输入框的场景。作为单独的更新方法。可以/应该用单个handleChange方法来完成吗？在React组件中处理多个onChange回调

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

答

能/这应该有一个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

代码

在React组件中处理多个onChange回调

相关推荐