我不能为 react-datepicker 设置起始值，但仍然可以从下拉列表中更改它？

Question

编辑：我找到了答案，请在下面检查并将它们加在一起！

我正在尝试让 react-datepicker 下拉菜单在首次加载时显示当前 start_time，然后用户可以从下拉菜单中选择他们想要的时间。然后可以使用按钮（不相关）提交时间。

目前时间段不显示placeholderText，它显示当前时间（我的时区）并且可以更改为用户选择的任何时间。我试着输入 selected={null}，它正确显示了 placeholderText，但它不会提交保存用户选择的时间。

如果有人能帮助我实现这一点，我将不胜感激！ placeholderText 不重要，只要它先显示 start_time 就可以了。提前致谢！

start_time = TIME 来自 MySQL (XX:XX:XX)
的数据类型 reservationsData[0] = {start_time: 9.00} 等
row = 设置 start_time 给出

class TimeClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      time: new Date()
    };
  }

  handleChange = time => {
    this.setState({
      time: time
    });
  }

  render() {
    let showThisFirst = this.props.reservationsData[this.props.row - 1].start_time;

    return (
      <div>
        <DatePicker
          selected={this.state.time}
          onChange={this.handleChange}
          placeholderText={moment(showThisFirst, "hh:mm:ss").format("HH.mm")}
          showTimeSelect
          showTimeSelectOnly
          timeIntervals={15}
          dateFormat="HH.mm"
          timeCaption="Time"
          getDefaultLocale="fi"
        />
      </div>
    );
  }
}

视觉上：

|---------|    
|  09.00  | // looks like this when it loads, start_time
|---------|

|---------|    
|  09.00  | // choosing a time to replace 09.00
|---------|
|  08.30  |
|  08.45  |
|  09.00  | 
|  09.15  |
|  09.30  |
|  09.45  |
|  10.00  |
|   ...   |
|---------|

|---------|    
|  09.45  | // when the time is chosen, user changes the start_time
|---------| // no need to submit, just choose. Button next to it handles it

Answer 1

所以，我自己找到了答案！

很简单，只需将DataPicker设置为selected={this.state.startTime}并将startTime: time放入handleChange即可。

简而言之：

handleChange = time => {
  this.setState({
    startTime: time
  });
}

return (
  <DatePicker
    selected={this.state.startTime}
    onChange={this.handleChange}
    placeholderText={moment(dropPicker, "hh:mm:ss").format("HH.mm")}
  />
);

我不能为 react-datepicker 设置起始值，但仍然可以从下拉列表中更改它？

I can't have a beginning value for react-datepicker and still be able to change it from dropdown?

reactjs

react-datepicker