React.js：從子級到父級的 onClick 函數

Question

我以這篇文章為例（React 方式），但它對我不起作用。 請指出我的錯誤，因為我不明白出了什么問題。

這是我看到的錯誤：

未捕獲的類型錯誤：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

問題是map回調中的this不引用 React 組件，因此this.HandleRemove是undefined 。

您可以通過將第二個參數傳遞給map來顯式設置this值：

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

現在回調內部的this引用與回調外部的this相同的值，即SendDocModal實例。

這與 React 無關，它只是 JavaScript 的工作方式。 請參閱如何在回調中訪問正確的“this”上下文？ 了解更多信息和其他解決方案。

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 - 創建待辦事項列表時遇到問題