javascript - 如何更好的表达这些React回调语句呢？

Question

  <Textbox
    label="New Item"
    text={this.state.text}
    callback={function(value) {
      this.setState({new_item:value});
    }.bind(this)} />

回调的核心是 new_item 和 value，那么我可以有一个像这样更具表现力的语句吗？

callback=partially_applied_setstate_to_this(new_item, value)

我更喜欢它是原生 JS 功能(不会太具有破坏性)。

Answer 1

假设您使用 React.createClass 来定义组件，最简单的方法是在类上定义一个方法，因为这些方法会自动绑定(bind)到实例:

var MyComponent = React.createClass({

  render : function() {
    <Textbox
      label="New Item"
      text={this.state.text}
      callback={this.handleNewItem} />
  },

  handleNewItem : function(value) {
    this.setState({new_item:value});
  }

});

如果您使用 ES6 语法，则可以使用粗箭头函数来保留 this 上下文:

<Textbox
  label="New Item"
  text={this.state.text}
  callback={value => this.setState({new_item:value})} />