this.prop踐踏textarea更改處理程序

Question

試圖學習React。在我的示例應用程序中，其他組件需要知道文檔（textarea的內容）是否未保存。

我正在嘗試的一種方法是讓我的父組件注入一個可以由子「編輯器」組件調用的支柱。

除了當從文本區調用handleChange時，this.props不再引用編輯器。我確信我有this踐踏，但我們不確定推薦的解決方法。

export default class Editor extends React.Component { 

    constructor(props) { 
     super(props); 
     console.log(this.props); 
    } 

    handleChange(event) { 
     console.log(this.props); 
     // this.props.setUnsaved(true); 
    } 

    render() { 
     return <textarea onChange={this.handleChange} />; 
    } 
}; 

如果有更好的方式來分享「未保存」的狀態，我向他們開放。最終我需要一個更好的模型系統，並可能使用Backbone。

Answer 1

當您使用ES6類React類版本（與使用React.createClass相反）時，函數不會自動綁定（請參閱React文檔中的No Autobinding）。所以，你需要手動綁定功能，也許：

render() { 
    return <textarea onChange={this.handleChange.bind(this)} />; 
} 

如果你不希望有功能每次使用它時綁定，您也可以手動綁定功能，當您初始化類：

constructor(props) { 
    ... 
    this.handleChange = this.handleChange.bind(this); 
} 

，或者，如果你正在使用支持ES7 property initializers一個transpiler（如Babel，與es7.classProperties配置選項設置），您可以定義要使用箭頭功能性的約束功能：

class Editor extends React.Component { 
    ... 
    handleChange = (event) => { 
     ... 
    } 
}