0

这是一个初学者 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 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）？

这是调用对象（TextField，目前是），或者我可以在类构造函数中将它绑定到类

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

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

4

2 回答 2

2

将其绑定到您的实例，并使用event.target或event.currentTarget访问 TextField；这显示在此处的文档中。

实际上，我认为有一个标准的 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的使用。thisevent.target

target并且currentTarget处理程序是否绑定到input type="text"不能包含其他元素currentTarget的元素（this如用于this其他用途）。target是事件发生的元素，可以是后代元素。想一想其中div有一个span：如果你已经迷上click了div，并且有人点击了span，target那么将是span并且currentTarget将是div。

因此，当this用. 对委派非常有用。eventcurrentTargetthistarget

于 2015-11-10T09:11:36.833 回答
1

您可以将多个值绑定到

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-10T09:12:46.773 回答