使用具有 datetime-local 类型的 material-ui TextField 时是否会阻止输入清除？

Question

如果执行下面的代码并只输入日期，渲染过程将运行并且日期输入将被清除。

此 TextField 旨在用作此组件的搜索条件。

import * as React from 'react'
import { TextField } from '@material-ui/core';

export const App = () => {
    const [loading, setLoading] = React.useState(false)
    const [date, setDate] = React.useState()

    React.useEffect(() => {
        const handle = setTimeout(() => {
            setLoading(true);
            // do something fetch.
            setLoading(false);
        }, 1000);
        return () => clearTimeout(handle);
    }, [loading]);

    return (
        <div>
            <TextField type='datetime-local' onChange={e => setDate(e.target.value)} defaultValue={date} />
        </div>
    )
}

将渲染更改为以下内容时输入被保留。

<input type='datetime-local' onChange={e => setDate(e.target.value)} />

有没有办法保留使用 material-ui 输入的日期？

谢谢！

Answer 1

您必须将初始值设置为 TextField 组件，并且它应该具有如下值属性：

<TextField
    type="datetime-local"
    InputLabelProps={{
            shrink: true
    }}
    value={date}
    onChange={(e) => { setDate(e.target.value) } }
/>

如果您想知道为什么我们需要这个，请看下面的示例：

class SampleApp extends Component {
  state = {
    date : "" // setting initial state date as ""
  }

  render() {
    return  <TextField
          type="datetime-local"
          InputLabelProps={{
            shrink: true
          }}
          value={this.state.date}
          onChange={(e) => { this.setState({date : e.target.value}) } }
        />
  }
}

在class个组件中，我们设置日期状态的初始值为“”。

因此，在您的功能组件中，您必须执行以下操作：

const App2 = () => {

  //if you need to set initialvalues to muliple do this
  const initialVal = {
    date: '',
    dateField2: ''
  }

  const [{date, dateField2}, setDate] = React.useState(initialVal); // need to set here // setting initial state date as ""

  return <TextField
          type="datetime-local"
          InputLabelProps={{
            shrink: true
          }}
          value={date}
          onChange={(e) => { setDate(e.target.value) } }
        />
}

Live demo，希望对你有帮助

使用具有 datetime-local 类型的 material-ui TextField 时是否会阻止输入清除？

Is there a prevent the input clear when using material-ui TextField with datetime-local type?

typescript

reactjs

material-ui

react-hooks