如何在React中将值传递给状态更改回调？

Question

I have the following anonymous function callback after setState:

  processOnBlur(event) {
      this.setState({
        input: event.target.id
      }, (event) => {
        console.log(event.target.id);
      });
  }

However, event inside the callback is undefined. How can I pass the event object to that callback? Is it even possible?

Answer 1

Passing a function callback to setState() will execute that function after the state change has occurred, which in this case will mean that even correctly passed in, your event target will be null inside of the callback (a state change happened and your component re-rendered, React wiped the event and you no longer have a target).

There are a few ways you can solve this, first off, you did just set the state of input to be equal to the event.target.id meaning you have access to it in your callback function through state:

processOnBlur(event) {
  this.setState({
    input: event.target.id
  }, () => {
    console.log(this.state.input);
  });
}

Another option would be to set a ref on the input, which is a React feature that gives you a reference to that component which you can freely use inside of your class functions.

So on your input:

<input id="username" 
       type="text" 
       ref="myInput"
       onBlur={(e) => this.processOnBlur(e)} />  

Then you can access it in your event handler through this.refs.myInput , like so:

processOnBlur(event) {
  this.setState({
    input: event.target.id
  }, () => {
    console.log(this.refs.myInput.id);
  });
}

// You could also use it to set your input state if you really wanted to, 
// though event.target is probably more appropriate.
//
// input: this.refs.myInput.id

---

EDIT: An extra method I forgot (and maybe the simplest in this situation) is to call event.persist() on the event that was passed to your event handler:

processOnBlur(event) {
  event.persit();

  this.setState({
    input: event.target.id
  }, () => {
    console.log(event.target.id);
  });
}

This prevents React from wiping the event reference so you can retain access to it.

Answer 2

You're covering up your event object with a new variable that's also called event - the stuff in the parentheses of a arrow function are its parameters, not what you're passing in. This is what your code should look like:

processOnBlur(event) {
    this.setState({
        input: event.target.id
    }, () => {
        console.log(event.target.id);
    });
}

Whereas effectively before, you were doing:

function callback(event) { // This is a different event parameter!
    console.log(event.target.id);
}

processOnBlur(event) {
    this.setState({
        input: event.target.id
    }, callback); // See? You're not actually passing event in
}