如何在 React 中设置 DatePicker 的值

Question

我想在单击设置日期按钮时设置DatePicker 值的日期，但我收到此错误RangeError Invalid time value

import React from "react";
import "./styles.css";
import DatePicker from "react-datepicker";
export default function App() {
  const my_date = "26/05/2020";
  var [edit_check_date, set_edit_check_date] = React.useState(new Date());

  const set_date = () => {
    set_edit_check_date(my_date);
  };
  return (
    <div className="App">
      <input type="submit" value="set date" onClick={set_date} />
      <DatePicker
        dateFormat="dd/MM/yyyy"
        className="form-control"
        selected={edit_check_date}
        onChange={date => set_edit_check_date(date)}
      />
    </div>
  );
}

Answer 1

我准备了一个使用react-datepicker 的示例。除了显示alert 来查看更改的日期外，我不会更改您的任何代码。这是完整的示例：

import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import React, {useState} from "react";

export default function DatePickerEx() {
    const [edit_check_date, set_edit_check_date] = useState(new Date());

    const open_modal = record => {
        /* record.check_date value is '25/05/2020' */
        set_edit_check_date(record.check_date); // This is making the error
    };

    function clickHandler(event) {
        const my_date = new Date( "2020-05-26");
        set_edit_check_date(my_date);
    }

    return (
        <div>
            <DatePicker
                dateFormat="dd/MM/yyyy"
                className="form-control"
                selected={edit_check_date}
                onChange={date => {
                    set_edit_check_date(date);
                    alert(date);
                }}
            />
            <button onClick={clickHandler}>Set 2020-05-26</button>
        </div>
    );
}

Here is the Code Sandbox

更新

function clickHandler(event) {
    let date = "26/05/2020";
    let my_date = new Date(date.split("/").reverse().join("-"));
    console.log(date);
    console.log(my_date);
    set_edit_check_date(my_date);
}