javascript - 如何在 ES2015 类方法中访问类和调用对象？

Question

这是一个初学者 React.js/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}
                            ...

当用户编辑名称并按 Enter 时，我会调用类中的一个方法来检查该书是否存在并更新我的商店:

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)和调用对象(<强>this.defaultValue) ?

要么this是调用对象(TextField，因为它当前是)，要么我可以将类构造函数中的this绑定(bind)到类

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

但随后我失去了对 TextField 的访问权限。我看不到任何方法来获取对方法中两个对象的引用。

Answer 1

将其绑定(bind)到您的实例，并使用 event.target或event.currentTarget访问文本字段；这显示在文档 here 中.

实际上，我认为有一个标准的 React 方式来连接它，这样你就不必显式地进行绑定(bind)(这会更好；绑定(bind)很麻烦):渲染时，使用 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如果处理程序绑定(bind)到不能包含其他元素的元素(如 input type="text" )并不重要，但对于可以包含以下元素的元素(如 currentTarget )可能很重要:是您将处理程序绑定(bind)到的元素(如果您将 this 用于其他用途，则您会看到 this )。 target是事件发生的元素，可以是后代元素。想想div与 span其中:如果您着迷click关于div ，然后有人点击 span , target将是span和currentTarget将是div .

所以当替换 this 时来自event的东西, currentTarget将是获得相当于 this 的默认值。 target对于委派确实很有用。