ReactJS：onChange 事件未觸發輸入

Question

這是代碼

import React, { Component, useImperativeHandle } from 'react';

class SearchBar extends Component {
render() {
return <input onChange={this.onInputChange} />;
}
onInputChange(event) {
  console.log(event)
 }
}

export default SearchBar;

輸入時仍然沒有錯誤，沒有記錄控制台。

輸入和控制台截圖

Answer 1

您需要將您的事件處理程序綁定到您的 class 組件，如下所示

 import React, { Component, useImperativeHandle } from 'react';

 class SearchBar extends Component {
   constructor(props) {
     super(props);
     this.onInputChange = this.onInputChangebind(this); //You NEEDED THIS
  }
   
  render() {
    return <input onChange={this.onInputChange} />;
  }
  onInputChange(event) {
    console.log(event)
  }
  }

export default SearchBar;

Answer 2

如屏幕截圖所示，您選擇了錯誤。 單擊10 messages （在屏幕截圖的左側），您將看到控制台 output。

Answer 3

在我這邊工作......我突出顯示了console.log輸出，如圖所示

否則，如果您需要查看在輸入標簽上鍵入的單詞，您可以執行console.log(event.target.value) instead of console.log(event)