Question

我正在使用反应组件和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

在组件级别上移出您的功能
在构造函数
在多个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。

Answer 2

Leo，给出了一个如何在构造函数中绑定方法的示例。但是我将再举一个例子，说明如何避免在构造函数中绑定。

箭头函数语法：

handleChange = e => { ... }

es6类和反应组件方法

2 个答案: