如何通过renderInput将状态数据传递给DesktopDatePicker？答案

【问题标题】：How to pass state data to DesktopDatePicker through renderInput?如何通过renderInput将状态数据传递给DesktopDatePicker？
【发布时间】：2021-12-20 21:56:28
【问题描述】：

我正在尝试创建一个日期选择器组件，但我无法将数据传递给 TextField 组件。

有没有什么方法可以通过 onChange 或者通过 renderInput 将 newValue 数据传递给 TextField？

这是我的代码：

import React from 'react'
import { Input, Box, Typography } from '@mui/material'
import { useField } from 'formik'
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
import TextField from '@mui/material/TextField';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import InputField from '../InputField';

const DateField = ({ label, ...props }) => {
  // const [field, meta] = useField(props)

  const [value, setValue] = React.useState(new Date('2021-12-25T21:11:54'));

  const handleChange = (newValue) => {
    setValue(newValue);
    console.log(value)
  };

  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>
      <DesktopDatePicker
        label="Date desktop"
        inputFormat="MM/dd/yyyy"
        value={value}
        onChange={handleChange}
        renderInput={() => <InputField name='date' />}
      />
    </LocalizationProvider>
  )
}

export default DateField

【问题讨论】：

你为什么不把value 作为道具传递？
我试图以这种方式传递数据renderInput={(value) => <InputField name='date' {...value}/>}，但没有成功。我有一个项目的 github 仓库，你想看看吗？可以发在这里吗？

标签： reactjs material-ui use-state formik yup

【解决方案1】：

   const [value, setValue] = React.useState(moment('2021-12-25T21:11:54',"YYYY-MM-DD HH:mm:ss"));

或

renderInput={(props) => <InputField {...props} name='date' />}

【讨论】：

您可以使用useState(() => moment()) 懒惰地初始化值，这样就不会在每次组件重新渲染时都创建时刻对象