使用 onChange 更新父組件的 state 子組件

Question

我正在嘗試通過使用來自子組件的輸入表單來更新來自父組件的事件數，但是我沒有看到它不起作用或顯示未定義

class App extends Component {
  state = {
     numberOfEvents: 32,
  };
.....
 updateNumberOfEvents = (eventNumber) => {
    this.setState({ numberOfEvents: eventNumber });
  };

render() {
    return (
      <div className="App">
        <NumberOfEvents updateNumberOfEvents={this.updateNumberOfEvents} />
}
</div>

---

class NumberOfEvents extends Component {
  state = {
    numberOfEvents: 32,
  };

  handleInputChanged = (event) => {
    const value = event.target.value;
    this.setState({
      numberOfEvents: value,
    });
    this.props.updateNumberOfEvents(value);
  };

  render() {
    const numberOfEvents = this.state.numberOfEvents;
    return (
      <div className="numberOfEvents">
        <form>
          <label for="fname"> Number of Events:</label>
          <input
            type="text"
            className="EventsNumber"
            value={numberOfEvents}
            onChange={this.handleInputChanged}
          />
        </form>
      </div>
    );
  }
}
export default NumberOfEvents;

Answer 1

this.setState({
  numberOfEvents: value,
}, () => {
           this.props.updateNumberOfEvents(value);
          }
);
    

詳情在這里。

Answer 2

雖然這個答案確實使它工作並正確突出了setState調用是異步的，但我建議完全刪除NumberOfEvents內的本地 state ，因為您目前有多個事實來源為您的表單。

更新您的onChange處理程序：

handleInputChanged = (event) => {
  this.props.updateNumberOfEvents(event.target.value);
};

並從父級傳遞值：

<NumberOfEvents
  updateNumberOfEvents={this.updateNumberOfEvents}
  numberOfEvents={this.state.numberOfEvents}
/>

並在您的子組件中使用該值：

<input
  type="text"
  className="EventsNumber"
  value={this.props.numberOfEvents}
  onChange={this.handleInputChanged}
/>

正如您當前的錯誤所示，擁有一個事實來源更不容易出錯並且更易於維護。

Answer 3

我同意hotpink，但我在codesandbox上嘗試了你的代碼......它沒有顯示未定義的值。 這是鏈接https://codesandbox.io/s/stackoverflow-iow19?file=/src/App.js 。

檢查控制台