Question

我正在尝试将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
  );

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

Answer 1

在.map回调中，this指的是全局对象，而不是Assets回复。 this.handleClick尝试访问可能不存在的全局变量 handleClick。因此，您将undefined传递给onButtonClicked，这与未传递道具的情况相同。

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

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

有关详细信息，请查看map documentation。

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

1 个答案: