React.js: onClick function from child to parent

Question

В качестве примера я использовал статью this (React way), но она не работает для меня. Пожалуйста, укажите мне мою ошибку, поскольку я не могу понять, что случилось.

Это ошибка я вижу:

Uncaught TypeError: this.props.onClick is not a function

Вот мой код:

// 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 экземпляр ,

Это не имеет никакого отношения к Реагированию, это то, как работает 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. Честно говоря, я не совсем понимаю, почему, может быть, может сказать нам более опытный программист.

Добавлен ключ для каждого элемента TagItem. Это рекомендуется, и консоль сообщит вам, что вы должны сделать это, чтобы при изменении состояния React мог отслеживать каждый элемент соответствующим образом.

Щелчок проходит через опоры. См. React js - having problems creating a todo list