Предотвращается ли очистка ввода при использовании материала-интерфейса TextField с типом datetime-local? - PullRequest
Новая
       25

Предотвращается ли очистка ввода при использовании материала-интерфейса TextField с типом datetime-local?

1 голос
/ 02 апреля 2019

Если выполнить приведенный ниже код и ввести только дату, процесс рендеринга запустится и ввод даты очистится.

Этот 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?

Спасибо!

1 Ответ

0 голосов
/ 02 апреля 2019

Вы должны установить начальное значение на TextField компонент, и оно должно иметь значение prop, как показано ниже: 

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

Живая демоверсия , надеюсь, это поможет

...