javascript - 为什么不从子元素触发 handleClick 事件？

Question

我试图将 onClick 事件传递给子组件，但没有触发任何事件。我想要做的是传递 data-id 和每个输入的值来更新每个子组件的值。但我无法让它工作。

这是 fiddle 。当我点击按钮时，没有任何东西被解雇。

http://jsfiddle.net/noppanit/knh8r55f/1/

/** @jsx React.DOM */
  var Assets = React.createClass({
    getInitialState: function() {
      return { data: [{ name : 'Initialising...' }] };
    },

    componentDidMount: function() {

     if(this.isMounted()) {
        this.setState({data : [
            {
                'embed_code': 'embed_code1',
                'name': 'cat1'
            },
            {
                'embed_code': 'embed_code2',
                'name': 'cat2'
            }
        ]});
      }

    },

    handleClick : function(event) {
      console.log('asdf');
    },

    render: function() {
      return (
        <div>
          {this.state.data.map(function(result, index) {
            return (
              <Asset data={result} onButtonClicked={this.handleClick}/>
            );
          })}
        </div>);
    }
  });

  var Asset = React.createClass({
    render: function() {
      return (
        <div key={this.props.data.embed_code}>
          <div>{this.props.data.name}</div>
          <span>Category</span>
          <input name="category" data-id={this.props.data.embed_code} />
          <input type="button" onClick={this.props.onButtonClicked} value="Update!"/>
        </div>
      )
    }
  });

  React.renderComponent(
    <Assets>, document.body
  );

不确定我是否遗漏了一些明显的东西。

Answer 1

在 .map 回调中，this 指的是 global object，而不是 Assets 实例。 this.handleClick 尝试访问全局变量 handleClick，它可能不存在。因此，您将 undefined 传递给 onButtonClicked，这与根本不传递 prop 是一样的。

您可以将第二个参数传递给 .map，它将成为回调中 this 的值:

{this.state.data.map(function(result, index) {
    return (
        <Asset data={result} onButtonClicked={this.handleClick}/>
    );
}, this)} // <- pass instance as second argument

有关更多信息，请查看 map documentation .