javascript - es6 类和 React 组件方法

Question

我正在使用 React 组件和 es6。 我应该如何将 onChange 方法中的逻辑使用到其他方法中？

render() {
    let input;
    return (
<tr>  <input 
        ref = {node => { input = node; }} 
        onChange = { event => {
            if (input.value === this.props.word.pl) 
                event.currentTarget.style.backgroundColor = 'Chartreuse';
            else if (input.value !== this.props.word.pl)
                event.currentTarget.style.backgroundColor = 'LightCoral';
            else if (input.value === "")
                event.currentTarget.style.backgroundColor = 'none';
            }
        }/>

Answer 1

1. 将函数移出组件级别

2. 在构造函数中绑定(bind) this

3. 在多个 onChange 事件上使用它

<小时/>

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

    // bind this
    this.handleChange = this.handleChange.bind(this);
  }

  // reusable function
  handleChange(e) {
    // ... your logic for onChange here
  }

  render() { 
    return (
      <div>
        <input onChange={this.handleChange} />
        <input onChange={this.handleChange} />
      </div>
    );
  }
};

了解有关 React 表单的更多信息 here .