如何在React中將值傳遞給狀態更改回調？

Question

我在setState之后有以下匿名函數回調：

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

但是，回調中的event未定義。 如何將事件對象傳遞給該回調？ 可能嗎

Answer 1

將函數回調傳遞給setState()將在狀態更改發生后執行該函數，在這種情況下，這意味着即使正確傳遞，您的事件目標在回調內部也將為null（狀態更改發生了，並且組件重新-rendered，React清除了事件，您不再有目標）。

有幾種方法可以解決此問題，首先，您只是將輸入的狀態設置為等於event.target.id這意味着您可以通過狀態在回調函數中訪問它：

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

另一個選擇是在輸入上設置ref ，這是一種React功能，可為您提供對該組件的引用，您可以在類函數中自由使用該組件。

因此，在您的輸入上：

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

然后，您可以通過this.refs.myInput在事件處理程序中訪問它，如下所示：

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

---

編輯：我忘記了（可能是這種情況下最簡單的方法）的另一種方法是在傳遞給事件處理程序的事件上調用event.persist() ：

processOnBlur(event) {
  event.persit();

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

這可以防止React抹掉事件引用，因此您可以保留對其的訪問。

Answer 2

您正在用一個也稱為event的新變量覆蓋event對象-箭頭函數括號中的內容是其參數，而不是您要傳遞的參數。這是代碼應如下所示：

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

鑒於之前有效，您正在做：

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
}