Question

我试图找出如何将子（DatePickerComponent）状态传递给父（Locations）组件。

我在this.props.callBackFromParent中传递了日期作为参数。我想知道如何在父组件中读取该日期参数。

  class DatePickerComponent extends React.Component {
      constructor (props) {
        super(props)
        this.state = {
          date: moment()
        };
        this.handleChange = this.handleChange.bind(this);
      }

      //local state change
      handleChange= (date) => {

        const valueOfInput = date.format();
        this.setState({
          date: date
        });
        this.getChosenDate();

         alert("time is now " + valueOfInput);


      }

     getChosenDate = () =>{
      let chosenDate = this.state.date;
      this.props.callBackFromParent(chosenDate);
      console.log("time to try " + chosenDate);
     }


      render() {
        return <DatePicker
            customInput={<ExampleCustomInput/>}
            selected={this.state.date}

             onChange={this.handleChange} ...

父组件（位置）

我尝试创建一个回调函数，我可以将子状态存储到新的父状态（Locations）

  myCallback = (dataFromChild) =>{
   this.setState({selectDatum:dataFromChild});
    alert(dataFromChild);

}

render(){

return(
  ...
   <MenuItem> <DatePicker callBackFromParent={this.myCallback} /> </MenuItem>

感谢您的帮助！

Answer 1

您可以将ref属性用于您的孩子，例如childRef，并在子级中使用函数，例如返回状态的getState（）。然后，在父级中，您可以使用this.refs.childRef.getState（）。

.container {
  overflow-y: scroll;  
 }

然后在DatePicker里面：

<DatePickerComponent ref="childRef"/>

在你的父母：

class DatePickerComponent {
 ...

 getState() {
   return this.state;
 }
}

如何将子状态传递给父组件

1 个答案: