Reactjs 当使用datetime本地类型的material ui 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>
    )
}

import*作为来自“React”的React
从“@material ui/core”导入{TextField}；
导出常量应用=（）=>{
常量[loading，setLoading]=React.useState（false）
const[date，setDate]=React.useState（）
React.useffect（（）=>{
常量句柄=设置超时（（）=>{
设置加载（真）；
//做点什么。
设置加载（假）；
}, 1000);
return（）=>clearTimeout（句柄）；
}，[装载]；
返回(
setDate（e.target.value）}defaultValue={date}/>
)
}

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

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

setDate（e.target.value）}/>

是否有办法保留使用物料界面输入的日期

---

谢谢大家!

您必须将初始值设置为

TextField

组件，并且其值应如下所示：

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

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

{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 SampleApp扩展组件{
状态={
日期：“”//将初始状态日期设置为“”
}
render（）{
返回{this.setState（{date:e.target.value}）}
/>
}
}

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

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

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

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

const App2=（）=>{
//如果需要将InitialValue设置为muliple，请执行此操作
常量initialVal={
日期：''，
日期字段2:“”
}
const[{date，dateField2}，setDate]=React.useState（initialVal）；//需要在此处设置//将初始状态日期设置为“”
返回{setDate（e.target.value）}
/>
}

---

，希望有帮助

不确定您是否需要这个？检查一下这个！不确定你想要实现什么？我想做。请检查文本字段和输入之间的差异。这就是我想要做的。谢谢！我希望你的评论是这个答案。你能把它改写成答案吗？谢谢你简单易懂的答案。