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}) } }
        />
  }
}

在类组件中，我们将日期状态的initialValue设置为“”。

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

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时，是否有防止输入清除的问题？

1 个答案: