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

发布时间：2020-12-15 20:17:02 所属栏目：百科来源：网络整理

导读：这就是我目前使用两个输入框处理场景的方式.作为每个人的单独更新方法.可以/应该用一个handleChange方法来完成吗？ https://codepen.io/r11na/pen/bZKOpj?editors=0011 class App extends React.Component { constructor(props) { super(props); this.handle

这就是我目前使用两个输入框处理场景的方式.作为每个人的单独更新方法.可以/应该用一个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'))

解决方法

Can/should this be done with a single handleChange method instead?

您可以像这样简化代码.

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,

A bind call or arrow function in a JSX prop will create a brand new
function on every single render. This is bad for performance,as it
will result in the garbage collector being invoked way more than is
necessary.

遵循此规则,您可以更改代码

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!