在反應中創建受控輸入

Question

我是一個新手，正在使用 FreeCodeCamp 學習 React。 在這個挑戰中，它說：

當你在輸入框中輸入時，該文本由handleChange()方法處理，設置為本地state中的input屬性，並呈現為頁面輸入框中的值。 組件 state 是有關輸入數據的單一事實來源。

我寫了這個解決方案：

 class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line
  this.handleChange = this.handleChange.bind(this);
  // Change code above this line
}
// Change code below this line
handleChange(event) {
  this.setState({
    input: event.target.value
  })
}
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line */}
      <input value={this.state.input} onChange={this.handleChange()} />
      { /* Change code above this line */}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

控制台說：

“構建錯誤，打開瀏覽器控制台了解更多信息。”

我在哪里做錯了？ 我看不到我的錯誤..

Answer 1

該問題與您如何將事件處理程序分配給onChange有關。

onChange需要一個回調 function ，當輸入值更改時將觸發該回調。 在您的帖子中使用onChange={this.handleChange()} ，您實際上將undefined分配給onChange ，因為handleChange function 更新了組件 state 但它不返回任何內容。

將其更改為onChange={this.handleChange}您的期望。 當輸入改變時， this.handleChange將被調用， event object 將作為參數傳入。

希望這會有所幫助。

Answer 2

您正在調用handleChange而不是將其引用作為onChange道具傳遞。

Answer 3

您可能不需要在 onChange 道具中運行您的 handleChange 方法。 所以你會得到這個：

onChange={this.handleChange}