如何访问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类方法中的类和调用对象？

回答

相关问题