這個(gè)問題是我們大多數(shù)人在從React.createClass()擴(kuò)展ES6類的組件定義語法React.Component.
它是由this背景差異React.createClass()VSextends React.Component.
使用React.createClass()將自動(dòng)綁定this上下文(值)正確，但在使用ES6類時(shí)并非如此。當(dāng)使用ES6方式時(shí)(通過擴(kuò)展React.Component)this上下文是null默認(rèn)情況下。類的屬性不會(huì)自動(dòng)綁定到Reaction類(組件)實(shí)例。
解決這一問題的途徑
我一共知道4種一般的方法。
將函數(shù)綁定到類構(gòu)造函數(shù)中。許多人認(rèn)為這是一種最佳實(shí)踐方法，它完全避免觸及JSX，并且不會(huì)為每個(gè)組件重新呈現(xiàn)創(chuàng)建一個(gè)新功能。
class SomeClass extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}}將函數(shù)內(nèi)聯(lián)綁定。您仍然可以在一些教程/文章/等等中發(fā)現(xiàn)這種方法，因此您必須了解它。它的概念與#1相同，但要注意的是，綁定函數(shù)在每次重呈現(xiàn)時(shí)都會(huì)創(chuàng)建一個(gè)新函數(shù)。
class SomeClass extends React.Component {
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick.bind(this)}></button>
);
}}使用胖箭頭函數(shù)。直到箭頭函數(shù)，每個(gè)新函數(shù)都定義了自己的函數(shù)。this價(jià)值。但是，箭頭函數(shù)不創(chuàng)建自己的this上下文，所以this具有來自Reaction組件實(shí)例的原始含義。因此，我們可以：
class SomeClass extends React.Component {
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={ () => this.handleClick() }></button>
);
}}或
class SomeClass extends React.Component {
handleClick = () => {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}}使用實(shí)用程序函數(shù)庫自動(dòng)綁定函數(shù)。有一些實(shí)用程序庫可以自動(dòng)為您完成任務(wù)。以下是一些流行的，僅舉幾個(gè)例子：
自動(dòng)裝配器是將類的方法綁定到this，即使在分離方法時(shí)也是如此。包裹使用@autobind在綁定方法之前this指向正確的引用組件的上下文。
import autobind from 'autobind-decorator';class SomeClass extends React.Component {
@autobind
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}}AutoBindDecorator非常聰明，可以讓我們一次綁定組件類中的所有方法，就像方法1一樣。
類自動(dòng)綁定是另一個(gè)廣泛用于解決此綁定問題的NPM包。與AutoBindDecorator不同，它不使用裝飾器模式，而是真正使用只需在構(gòu)造函數(shù)中使用一個(gè)自動(dòng)綁定的函數(shù)。組件的方法以正確引用this.
import autobind from 'class-autobind';class SomeClass extends React.Component {
constructor() {
autobind(this);
// or if you want to bind only only select functions:
// autobind(this, 'handleClick');
}
handleClick() {
console.log(this); // the React Component instance
}
render() {
return (
<button onClick={this.handleClick}></button>
);
}}PS：其他非常類似的圖書館是反應(yīng)自綁定.
建議
如果我是你，我會(huì)堅(jiān)持第一種方法。但是，一旦您在類構(gòu)造函數(shù)中獲得了大量的綁定，我將建議您探索方法4中提到的一個(gè)助手庫。
其他
這與你所面臨的問題無關(guān)，但你不應(yīng)過度使用參考文獻(xiàn).
你的第一個(gè)傾向可能是在你的應(yīng)用程序中使用參考文獻(xiàn)來“讓事情發(fā)生”。如果是這樣的話，花點(diǎn)時(shí)間更仔細(xì)地考慮一下在組件層次結(jié)構(gòu)中應(yīng)該在哪里擁有狀態(tài)。
為了類似的目的，就像您需要的一樣，使用受控元件是首選的方法。我建議你考慮用你的元件state。因此，您可以簡單地訪問如下所示的值：this.state.inputContent.
