React組件無法更新onClick事件處理程序

我有一個反應組件，它表示單詞表中的一行。它在狀態更改時重新呈現，但不會更新事件處理程序onClick。我已經將組件剝離到最低限度，並且仍然存在問題。當我點擊「編輯」鏈接時，控制檯打印出「onEdit」，並且狀態在瀏覽器中似乎看起來正確，但是當我點擊「還原」時，控制檯再次打印「onEdit」。爲什麼在狀態更改之後onClick事件沒有更新爲使用_onRevert函數？爲什麼它仍然掛在第一個渲染通道的舊事件處理程序上？謝謝。React組件無法更新onClick事件處理程序

var React = require('React/addons'); 

var WordListItem = React.createClass({ 
    getInitialState: function(){ 
     return { 
      isEditing: false, 
      english: this.props.word.english 
     }; 
    }, 
    _onEdit: function(e) { 
     e.preventDefault(); 
     console.log('onEdit'); 
     this.setState({isEditing: true}); 
    }, 
    _onRevert: function(e){ 
     e.preventDefault(); 
     console.log('onRevert'); 
     this.setState({isEditing: false}); 
    }, 
    render: function() { 
     if(this.state.isEditing) { 
      return (
       <div> 
        <span>Editing: {this.state.english} </span> 
        <a href="#" onClick={this._onRevert}>Revert</a> 
       </div> 
      ) 
     } else { 

      return (
       <div> 
        <span>Not Editing: {this.state.english} </span> 
        <a href="#" onClick={this._onEdit}>Edit</a> 
       </div> 
      ) 
     } 

    } 
}) 

module.exports = WordListItem;

更新下

因此，原來，它的作品，如果我這個組件粘貼到我的主要app.jsx文件，它的工作原理，但如果我有使用它需要的js。這很奇怪，因爲browserify正在工作，因爲我仍然可以包含其他文件並編寫嵌套的反應組件，只是它的事件不會在某些元素上得到更新。也許在這一點上，我應該提出一個新的問題，這個問題更關注。

var React = require('react/addons'); 
//var materialize = require('materialize-css'); 
var word = {id: 4671810846, english: "water", persian: "آب", phonetic: "aab", tags: ["noun","food","drink"]}; 

var WordListItem = require('./components/wordList/WordListItem.jsx'); 

// var WordListItem = React.createClass({ 
//  getInitialState: function(){ 
//   return { 
//    isEditing: false, 
//    english: this.props.word.english 
//   }; 
//  }, 
//  _onEdit: function(e) { 
//   e.preventDefault(); 
//   console.log('onEdit'); 
//   this.setState({isEditing: true}); 
//  }, 
//  _onRevert: function(e){ 
//   e.preventDefault(); 
//   console.log('onRevert'); 
//   this.setState({isEditing: false}); 
//  }, 
//  render: function() { 
//   if(this.state.isEditing) { 
//    return (
//     <div> 
//      <span>Editing: {this.state.english} </span> 
//      <a href="#" onClick={this._onRevert}>Revert</a> 
//     </div> 
//   ) 
//   } else { 
// 
//    return (
//     <div> 
//      <span>Not Editing: {this.state.english} </span> 
//      <a href="#" onClick={this._onEdit}>Edit</a> 
//     </div> 
//   ) 
//   } 
// 
//  } 
// }) 


React.render(<WordListItem word={word}/>, document.getElementById('app'));

來源

2015-05-26 aherriot

console.log「this」裏面的函數調用了_onEdit，然後console.log的狀態是isEditing。你確定你的上下文在該函數中是正確的嗎？ –

那很有趣。當我登錄'this'並單擊編輯然後單擊還原時，_onEdit和_onRevert處理程序都會記錄相同的this對象，並且isEditing的狀態在此對象內設置爲true。但是，this.state.isEditing首先打印false，然後打印爲true。 – aherriot

好吧，至少有真正的問題。你的代碼工作，但它看起來像inital國家正在重新設置。 –

你可以顯示你在父級渲染這個子組件的方式嗎？我懷疑當你生成一個WordListItem的數組時，你並沒有設置一個key屬性（或者使用一個簡單的索引作爲key屬性，如果你也刪除了WordListItem的話，這是一個災難處理的祕訣，這個關鍵字必須是唯一的。

而且我覺得這個組件會更好，如果它沒有狀態可言，對頂級父組件狀態，而不是發送道具到孩子

編輯：

在你word_list_item。 jsx文件，你需要反應爲var React = require（'React/addons'）;這只是你在粘貼代碼時犯的一個錯誤嗎？它應該是var React = require（'react/addons'）和小寫字母Jus小小的觀察，不知道這是否與任何事情有關，但肯定看起來像你有某種瀏覽問題。

來源

2015-05-26 13:45:40 blushrt

感謝您的建議。我絕對在它們的列表中設置了一個唯一的鍵。此外，該州是有用的，只是可能不適合這個精簡版本。 – aherriot

React組件無法更新onClick事件處理程序

回答

相關問題