使用 onChange 从子组件更新父状态答案

【问题标题】：update parent's state fom child component using onChange使用 onChange 从子组件更新父状态
【发布时间】：2021-08-23 19:18:58
【问题描述】：

我正在尝试通过使用来自子组件的输入表单来更新来自父组件的事件数，但是我没有看到它不起作用或显示未定义

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;

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

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

详情是here。

【讨论】：

【解决方案2】：

虽然this 的回答确实使它工作并正确地强调了setState 调用是异步的，但我建议完全删除NumberOfEvents 中的本地状态，因为您目前有多个事实来源用于您的表单。

更新您的 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}
/>

如您当前的错误所示，拥有一个事实来源不易出错且更易于维护。

【讨论】：

【解决方案3】：

我同意hotpink，但我在codesandbox 上尝试了您的代码...它没有显示未定义的值。这是链接https://codesandbox.io/s/stackoverflow-iow19?file=/src/App.js。

检查控制台

【讨论】：