reactjs - 在 TextField 中使用日期类型时如何显示值？

Question

我正在使用TextFieldfrom material-ui，我想在 TextField 中显示当前日期，并允许用户选择另一个日期。如果可能的话？

使用时value={date}不会出现。我试图在互联网上找到一些帮助，但找不到任何东西。代码如下：TextFieldtype="date"

• 任何帮助表示赞赏！并提前感谢。

---

import React, { useState } from 'react';
import { TextField } from '@material-ui/core';
import { useForm } from 'react-hook-form';

export const AddDate: React.FC = () => {
    const [date, setDate] = useState(
        new Date().getDate() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getFullYear(),
    );

    // handles when user changes input in date inputfield
    const handleChangeDate = (e: React.ChangeEvent<HTMLInputElement>): void => {
       setDate(e.target.value);
    };

    return(
        {/*Text field - date*/}
        <TextField
            name="date"
            id="date"
            label="Date"
            type="date"
            InputLabelProps={{ shrink: true }}
            inputRef={register}
            value={date}
            onChange={handleChangeDate}
            fullWidth
            required
          />
    );
};

标签： reactjstypescriptmaterial-ui

Answer 1

这对我有用。

import React, { useState, useEffect } from "react";
import { TextField } from "@material-ui/core";
import "./styles.css";
import moment from 'moment';

const App =()=> {
  const [date, setDate] = useState(
    moment(new Date()).format("YYYY-MM-DD")
 );

 // handles when user changes input in date inputfield
 const handleChangeDate = e => {
    setDate(e.target.value);
 };

  console.log(date)

 return (
  <>
  <TextField
    name="date"
    id="date"
    label="Date"
    type="date"
    InputLabelProps={{ shrink: true }}
    value={date}
    onChange={handleChangeDate}
    fullWidth
    required
  />
</>
);
}

 export default App;

我只是稍微更改了您的代码。只有变化来自 useState。您只需使用 moment js 将日期转换为 material-ui 日期类型。