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

问题

This is a beginner React.js / ES2015 question.

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

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

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

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

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

回答1:

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

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

Here's the example from the docs:

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

Note handleChange's use of this and event.target.

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.

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.

回答2:

You can bind multiple values to the

onEnterKeyDown={this.onBookNameChange}

It could look like this

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

In your function it would look like this:

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

来源：https://stackoverflow.com/questions/33626236/how-do-i-access-both-the-class-and-the-calling-object-in-an-es2015-class-method