Question

我使用this文章作为示例（React方式），但它不适用于我。请指出我的错误，因为我无法理解什么是错的。

这是我看到的错误：

未捕获的TypeError：this.props.onClick不是函数

这是我的代码：

// PARENT
var SendDocModal = React.createClass({
  getInitialState: function() {
    return {tagList: []};
  },
  render: function() {
    return (
      <div>
        {
          this.state.tagList.map(function(item) {
            return (
              <TagItem nameProp={item.Name} idProp={item.Id} onClick={this.HandleRemove}/>
            )
          })
        }
      </div>
    )
  },
  HandleRemove: function(c) {
    console.log('On REMOVE = ', c);
  }
});

// CHILD
var TagItem = React.createClass({
  render: function() {
    return (
      <span className="react-tagsinput-tag">
        <span>{this.props.nameProp}</span>
        <a className='react-tagsinput-remove' onClick={this.HandleRemove}></a>
      </span>
    )
  },
  HandleRemove: function() {
    this.props.onClick(this);
  }
});

提前致谢！

Answer 1

问题是this回调中的map未引用React组件，因此this.HandleRemove为undefined。

您可以通过将第二个参数传递给this来明确设置map值：

this.state.tagList.map(function() {...}, this);

现在this 内部回调引用与回调之外的this 相同的值，即SendDocModal实例。

这与React无关，它只是JavaScript的工作方式。有关详细信息和其他解决方案，请参阅How to access the correct `this` context inside a callback?。

Answer 2

尝试以下方法：

    var SendDocModal = React.createClass({
        getInitialState: function() {

            var item = {};
            item.Name = 'First';
            item.Id = 123;

            var item2 = {};
            item2.Name = 'Second';
            item2.Id = 123456;
            return {tagList: [item,item2]};
        },

        HandleRemove: function(c){
            console.log('On REMOVE = ', c);
        },

        render: function() {
            return (<div>
                {this.state.tagList.map(function(item){
                    return(
                            <TagItem nameProp={item.Name} idProp={item.Id} key={item.Id} click={this.HandleRemove}/>
                    )}, this)}
                    </div>
            )       
        }

    });
    // CHILD
    var TagItem = React.createClass({

        handleClick: function(nameProp)
        {
            this.props.click(nameProp);
        },


        render: function(){
            return(
                <span className="react-tagsinput-tag" ><span onClick={this.handleClick.bind(this, this.props.nameProp)}>{this.props.nameProp}</span><a className='react-tagsinput-remove' ></a></span>
            )
        }
    });

几乎没有变化：

在tagList映射后添加'this'。说实话，我不完全确定为什么 - 也许更有经验的程序员可以告诉我们。

为每个TagItem添加了一个键。建议这样做，控制台会通知您应该这样做，以便在状态发生变化时，React可以相应地跟踪每个项目。

点击通过道具传递。见React js - having problems creating a todo list

React.js：onClick函数从子级到父级

2 个答案: