Reactjs 使用输入类型文本对 useState 和日期做出react

发布于12月13日

我有两个问题

将缺省值设置为当前日期
使用日期的html输入类型查看和更改日期

我怎么才能让它工作呢？

以下是我的样例代码:

    const [fromDate, setFromDate] = useState(new Date())
<input
                    className={`form__input  ${!fromDate &&'form__input--incomplete'}`}
                    id="fromDate"
                    name="fromDate"
                    type="date"
                    autoComplete="off"
                    value={fromDate}
                    onChange={(e)=>setFromDate(e.target.value)}
                />

推荐答案

以下是解决方案:

import { useState } from "react";
    
export default function App() {
  const [fromDate, setFromDate] = useState(new Date());
  return (
    <div className="App">
      <input
        // className={`form__input  ${!fromDate && "form__input--incomplete"}`}
        id="fromDate"
        name="fromDate"
        type="date"
        autoComplete="off"
        value={
          fromDate.getFullYear().toString() +
          "-" +
          (fromDate.getMonth() + 1).toString().padStart(2, 0) +
          "-" +
          fromDate.getDate().toString().padStart(2, 0)
        }
        onChange={(e) => {
          setFromDate(new Date(e.target.value));
        }}
      />
    </div>
  );
}

现场直播工作演示:https://codesandbox.io/s/xenodochial-feather-t2heml?file=/src/App.js:0-739