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(data)

Answer 2

两件事你做不正确。

首先：您无法将道具直接传递到Route组件，您需要使用render道具来实现

检查Passing custom props to router component in react-router v4以获得更多详细信息

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

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>
        );

    }

}

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

2 个答案: