如何在 ES2015 class 方法中访问 class 和调用对象？

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}
                            ...

当用户编辑姓名并按下回车键时，我会在我的 class 中调用一个方法来检查这本书是否存在并更新我的商店：

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);
    }

问题是：在这种方法中，我如何访问 class (this.doesBookExistElseShowMessage ) 和 调用对象 (this.defaultValue) ?

要么 this 是调用对象（TextField，因为它当前是）或者我可以在 [=43] 中绑定 this =] class

的构造函数

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

但后来我无法访问 TextField。我看不到任何方法可以引用方法中的两个对象。

Answer 1

将其绑定到您的实例，并使用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"）无关紧要，但对于那些元素可能很重要can: currentTarget 是您将处理程序绑定到的元素（如果您将 this 用于其他用途，您会看到 this ）。 target是事件发生的元素，可以是后代元素。想象一个 div 里面有一个 span：如果你在 div 上勾选了 click，然后有人点击了 span，target将是 span，currentTarget 将是 div。

因此，当用 event 中的内容替换 this 时，currentTarget 将是获得等同于 this 的默认内容。 target 对委派非常有用。

Answer 2

您可以将多个值绑定到

onEnterKeyDown={this.onBookNameChange}

它可能看起来像这样

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

在你的函数中它看起来像这样：

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

如何在 ES2015 class 方法中访问 class 和调用对象？

How do I access both the class and the calling object in an ES2015 class method?

javascript

reactjs

material-ui