React：如何将子组件(DatePickerComponent)状态传给父组件(Locations)并读取参数？

没问题，我来帮你理清楚怎么在父组件Locations里读取子组件DatePickerComponent传过来的date参数，其实核心就是父组件传递回调函数给子组件，子组件调用这个函数并传入参数，你已经在子组件里迈出了关键一步，接下来补全父组件的逻辑就行：

步骤1：在父组件Locations中定义回调函数 #

首先在父组件里创建一个用于接收子组件传值的函数，比如叫handleDateFromChild，这个函数会接收子组件传过来的date参数，你可以把它存在父组件的state里，或者直接用来做其他业务逻辑：

class Locations extends React.Component {
  constructor(props) {
    super(props);
    // 父组件维护一个接收子组件日期的state
    this.state = {
      selectedDate: null
    };
    // 绑定this，确保函数里的this指向父组件实例
    this.handleDateFromChild = this.handleDateFromChild.bind(this);
  }

  // 定义接收子组件日期的回调函数
  handleDateFromChild(date) {
    // 这里就拿到子组件传过来的date了！
    console.log("从子组件拿到的日期：", date);
    // 把日期存在父组件的state里，方便后续使用
    this.setState({
      selectedDate: date
    });
  }

  render() {
    return (
      <div>
        {/* 把回调函数作为props传给子组件 */}
        <DatePickerComponent callBackFromParent={this.handleDateFromChild} />
        {/* 在父组件里展示拿到的日期 */}
        {this.state.selectedDate && (
          <p>当前选中的日期：{this.state.selectedDate.format()}</p>
        )}
      </div>
    );
  }
}

步骤2：补全子组件的调用逻辑 #

你已经在子组件的handleChange里调用了this.props.callBackFromParent(date)，这里给你补全完整的子组件代码，确保逻辑通顺：

import moment from 'moment';

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

  // 处理日期选择变化的方法
  handleChange(date) {
    const valueOfInput = date.format();
    // 更新子组件自身的state
    this.setState({ date });
    // 调用父组件传过来的回调函数，把选中的date传回去
    this.props.callBackFromParent(date);
  }

  render() {
    return (
      {/* 这里用原生input做示例，实际可以替换成你使用的日期选择器组件 */}
      <input
        type="date"
        value={this.state.date.format('YYYY-MM-DD')}
        onChange={(e) => {
          const selectedDate = moment(e.target.value);
          this.handleChange(selectedDate);
        }}
      />
    );
  }
}

关键逻辑说明 #

• 父组件通过props把自定义回调函数传递给子组件，子组件通过this.props.回调函数名拿到这个函数
• 当子组件的日期发生变化时，调用这个回调函数并传入date参数，父组件的回调函数就能直接接收并处理这个值
• 把日期存入父组件的state后，父组件的其他渲染逻辑或业务代码都能方便地使用这个日期值

内容的提问来源于stack exchange，提问作者Dave_888