时间戳

首页 > 解决方案 > 从孩子设置父母的状态 - 反应？

javascript - 从孩子设置父母的状态 - 反应？

问题描述

尝试在父组件（名为 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;

标签： javascriptreactjs

解决方案

您将调用的函数传递onClick给 Book 组件，因此您必须编写this.props.onClick而不是this.props.onUpdate

尝试更改您的onClicktoonUpdate或调用this.props.onClick(data)而不是this.props.onUpdate(data)

更新：您现在可以将孩子传递给 Route

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

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

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

推荐阅读