javascript - 从子级设置父级状态 - React？

Question

尝试在父组件(名为parent.js)中设置状态，并在文件“daySelect.js”中名为“Book”的子组件中选择日期，以记录预订详细信息。但是，出现错误，说我从子级调用以更新父级中的状态的函数(onUpdate)是“不是函数”:

父编码(parent.js):

class Parent extends Component {
  // Setting the component's initial state
  constructor(props) {
    super(props);
  this.state = {
    date: "",
  };
}

onUpdate = (dateChosen) => {
  this.setState({
    date: dateChosen
    })
   console.log(this.state.date);
    };

render() {
return (
  <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/book" component={Book} onClick={this.onUpdate}/>
        <Route exact path="/time" component={Time} />
        <Route exact path="/form" component={Form} />
  </div>
);

} }

子组件:

class Book extends Component {
// Setting the component's initial state
 constructor(props) {
   super(props);
 }

  onClick = (date) => {
   var dateChosen = date[0];
   // console.log(dateChosen);
   this.props.onUpdate(date);
   this.setState({date: dateChosen});
  };


 render() {
  return (
    <div>
     <ReactWeeklyDayPicker mobilView={window.innerWidth < 100} format={'YYYY-MM-DD'} selectDay={this.onClick.bind(this)} />
    </div>
);
}

export default Book;

Answer 1

您将一个名为 onClick 的函数传递给了 Book 组件，因此您必须编写 this.props.onClick 而不是 this.props.onUpdate

尝试将 onClick 更改为 onUpdate 或调用 this.props.onClick(data) 而不是 this。 props.onUpdate(数据)

更新:您可以now pass childrens to Route

<Route exact path="/book"><Book {...props} onClick={this.onUpdate}/></Route>

更新:现在您必须将嵌套子级更改为 React Router v6 中的 element={}

<Route path=":id" element={<Book />} />