Javascript 从子级设置父级中的状态-反应？

正在尝试在名为parent.js的父组件中设置状态，并在文件“daySelect.js”中名为“Book”的子组件中选择日期以记录保留详细信息。但是，出现了一个错误，说我正在从child调用onUpdate函数来更新父级中的状态不是一个函数：

Parent编码Parent.js：

} }

子组件：

---

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

尝试将onClick更改为onUpdate，或者调用this.props.onClickdata而不是this.props.onUpdatedata

更新：你可以

---

有两件事你做得不对

第一：不能直接将道具传递给管线组件，需要使用“渲染道具”进行传递

查看更多详细信息

第二：您可以使用传递的名称访问子组件中的道具。在您的情况下，它将是this.props.onClick而不是this.props.onUpdate

---

onUpdate=DateSelected=>{可能应该是onUpdate-DateSelected{.我可以提个建议吗，…React很好，但是使用状态可能会变得混乱。使用React的一个常见方法是使用单一的真相来源意识形态。Redux很流行，但我发现它太冗长，并使用proxy的滚动了我自己的状态管理。谢谢，Victor，但是即使在更改了this.props.onUp之后仍然会收到以下错误消息datedata to this.props.onClickdata:TypeError:\u this.props.onClick不是一个函数，感觉父级和子级之间没有有效地通信。我无法彻底检查它，但我知道将函数传递给路由器有点可疑，因为我从未这样做过

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;

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

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" render={(props) => <Book {...props} onClick={this.onUpdate}>} />
                <Route exact path="/time" component={Time} />
                <Route exact path="/form" component={Form} />
          </div>
        );

    }

}