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

我正在尝试将onClick事件传递给Child组件，但是什么也没有触发。我想做的是传递data-id和每个输入的值以更新每个子组件的值。但是我无法正常工作。

这是小提琴。当我单击按钮时，没有任何东西被触发。

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
  );

不知道我是否缺少明显的东西。

最佳答案

在.map回调内部，this引用全局对象，而不是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。