如何在ES2015类方法中访问类和调用对象? [英] How do I access both the class and the calling object in an ES2015 class method?

问题描述

这是一个初学者React.js/ES2015问题.

This is a beginner React.js / ES2015 question.

我有一些显示书名列表的HTML:

I have some HTML that displays a list of book names:

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时，我在班级中调用一个方法来检查该书是否存在并更新我的商店:

And when the user edits a name and presses enter I call a method in my class to check if the book exists and update my store:

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 )吗?

Here's the problem: in this method, how do I access both the class (this.doesBookExistElseShowMessage) and the calling object (this.defaultValue) ?

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

Either this is the calling object (the TextField, as it currently is) or I can bind this in the class constructor to the class

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

，但随后我无法访问TextField.我看不到在该方法中获得对这两个对象的引用的任何方法.

but then I lose access to the TextField. I can't see any way of getting a reference to both objects in the method.

推荐答案

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

Bind it to your instance, and use event.target or event.currentTarget to access the TextField; this is shown in the docs here.

实际上，我认为有一种标准的React方法可以将其连接起来，因此您不必显式进行绑定(这会更好；绑定很麻烦):渲染时，请使用onChange={this.onBookNameChange}.

Actually, I think there's a standard React way to hook it up so you don't have to do the bind explicitly (which would be better; binding is cumbersome): When rendering, use 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:如果您已经将click钩在div上，并且有人单击span，则target将是span，而currentTarget将是div.

target and currentTarget doesn't matter if the handler is bound to an element (like input type="text") that can't contain other elements, but can matter for ones that can: currentTarget is the element that you bound the handler to (what you'd see as this if you were using this for something else). target is the element where the event occurred, which can be a descendant element. Think a div with a span in it: if you've hooked click on the div, and someone clicks the span, target will be the span and currentTarget will be the div.

因此，当用event中的内容替换this时，currentTarget将是获得与this等效的默认内容. target对于委派真的很有用.

So when replacing this with something from event, currentTarget would be the default thing to reach for to get an equivalent to this. target is really useful for delegation.

这篇关于如何在ES2015类方法中访问类和调用对象?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！