如何訪問ES2015類方法中的類和調用對象？

這是初學者的React.js/ES2015問題。如何訪問ES2015類方法中的類和調用對象？

我有一些HTML顯示書的名單：

class BookList extends React.Component 
{ 
    render() 
    { 
     return (
      <div> 
       {this.state.books.map((book) => 
       { 
        return (      
         <TextField 
          defaultValue={book.name} 
          key={book.name} 
          onEnterKeyDown={this.onBookNameChange} 
          ...

而當用戶編輯的名稱並按回車我所說的方法在我的課，檢查了本書的由來和更新我的商店：

class BookList extends React.Component 
{ 
    onBookNameChange(event) 
    { 
     const newBookName = event.target.value; 
     if (this.doesBookExistElseShowMessage(newBookName)) 
      return; 
     const oldName = this.defaultValue; 
     const oldBooks = Store.getState().books; 
     const newBooks = Helper.EditValueInArray(oldBooks, 'name', oldName, newBookName); 
     Actions.updateBooks(newBooks); 
    }

這裏的問題：在這個方法中，我如何同時訪問類（this.doesBookExistElseShowMessage）和愈傷組織ng object（this.defaultValue）？

要麼這是調用對象（文本字段，因爲它是目前），或者我可以在類的構造函數綁定這到類

this.onBookNameChange = this.onBookNameChange.bind(this);

但後來我失去的文本字段訪問。我看不到在方法中獲取對這兩個對象的引用的任何方法。

來源

2015-11-10 Richard

將它綁定到您的實例，並使用event.target或event.currentTarget來訪問TextField;這在文檔here中顯示。實際上，我認爲有一個標準的React方法來掛鉤它，所以你不必顯式地執行綁定（這會更好;綁定很麻煩）：當渲染時，使用onChange={this.onBookNameChange}。

下面是從文檔的例子：

getInitialState: function() { 
    return {value: 'Hello!'}; 
}, 
handleChange: function(event) { 
    this.setState({value: event.target.value}); 
}, 
render: function() { 
    var value = this.state.value; 
    return <input type="text" value={value} onChange={this.handleChange} />; 
}

注handleChange的使用this和event.target。

target和currentTarget如果處理程序綁定到不能包含其他元素的元素（如input type="text"）無所謂，但是能夠決定的事情了那些能：currentTarget是你綁定的處理程序元素（如果你使用this作爲其他東西，你會看到this）。 target是事件發生的元素，可以是後代元素。想在它span一個div：如果你在div迷上click，有人點擊span，target將是span和currentTarget將是div。

所以從event的東西更換this時，currentTarget將是默認的事情去夠得到一個相當於this。 target對於授權非常有用。

來源

2015-11-10 09:11:36

其實，更好的使用[ 'event.currentTarget']（https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget） – Bergi

@Bergi：是的，如果你想要一個一個換一個這個本來會是什麼的好點。 –

可以將多個值綁定到

onEnterKeyDown={this.onBookNameChange}

它可能看起來像這樣

onEnterKeyDown={this.onBookNameChange.bind(this, book.name}

在你的函數它應該是這樣的：

onBookNameChange(name, ev) { 
    console.log(this); 
    console.log(ev); 
    console.log("name: " + name); 
}

來源

2015-11-10 09:12:46 Timon

如何訪問ES2015類方法中的類和調用對象？

回答

相關問題