Question

我正在锐化我的反应技巧，通过这样做我偶然发现了这段甜蜜的代码。

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state({term:''});

    this.onInputChange = this.onInputChange.bind(this);
  }

  onInputChange(event) {
    this.setState({ term: event.target.value});
  }
}

这里是jsx部分

render() { 
  return(<input
    value={ this.state.term }
    onChange={ this.onInputChange }
  />)
}

您能帮助/告诉或向我展示消息来源，我能真正理解该行中的情况吗？

this.onInputChange = this.onInputChange.bind(this);

有点让我困惑。谢谢你的支持。和亲切的问候

Answer 1

您可以浏览this博客，了解为何需要绑定。

为了绑定方法，我建议你安装stage-1 Babel preset并使用箭头功能。箭头函数会自动绑定 this ，因此我们不需要使用bind（）函数。

为了更加清晰，您可以阅读this博客。

使用箭头功能，您的代码将如下所示：

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state({term:''});
  }

  onInputChange = (event) => {
    this.setState({ term: event.target.value});
  }
}

render() { 
  return(
    <input
      value={this.state.term}
      onChange={this.onInputChange}
    />
  )
}

现在，每次添加新功能时都不需要添加bind语句。

绑定：有人可以帮助我做到这一点吗？

1 个答案: