React DatePicker 从父类获取状态

Question

在我的 form.js 中，我试图从日期选择器中选择日期并更新 form.js 中的状态

Form.js

export default class form extends Component {
  constructor(props) {
      super(props);
      this.state = {
        Date: new Date(),
      };

      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
      if(event.target.id === "delivery_date"){
        this.setState({Date: event.target.value});
     }

    render(){
   .....
    <CustomDatePicker id="delivery_date" value={this.state.selectedDate}   onChange={this.handleChange}></CustomDatePicker>
.....
    }
}

CustomDatePicker.js

export default function CustomDatePicker() {
    const [selectedDate, setDate] = useState(new Date());
    const isWeekday = date => {
      const day = getDay(date);
      return day !== 0 && day !== 6;
    };
    return (
        console.log({selectedDate}),
        <DatePicker 
          selected={selectedDate}
          onChange={date => setDate(date)}
          minDate={new Date()}
          maxDate={addDays(new Date(), 4)}
          // excludeDates={[new Date(), subDays(new Date(), 1)]} to exclude PB holiday
          filterDate={isWeekday}
          placeholderText="Select a date">
        </DatePicker>
    )
  }
}

我可以从 console.log 打印 customDatePicker.js 中的 selectedDaate，但我无法获取 form.js 中的值

Answer 1

你需要让CustomDatePicker调用props上的onChange方法，这样当日期变化时，Form.js方法就会被调用

你试过了吗？

   <DatePicker 
      selected={selectedDate}
      onChange={date => {
         this.props.onChange(date)
         setDate(date)
      }
      minDate={new Date()}
      maxDate={addDays(new Date(), 4)}
      // excludeDates={[new Date(), subDays(new Date(), 1)]} to exclude PB holiday
      filterDate={isWeekday}
      placeholderText="Select a date">
    </DatePicker>

我现在无法测试代码，但这应该让您知道该怎么做