UI TexField Input Time Picker не изменяет значение - PullRequest
0 голосов
/ 07 декабря 2018

Использовал это: https://codesandbox.io/s/5154qzmjl в качестве примера выбора времени пользовательского интерфейса материала, и теперь у него проблемы, потому что я не могу изменить значение времени.

Я отображаю массив дней всостояние в TextField:

this.state = {
    days: [
                { day: 0, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 1, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 2, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 3, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 4, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 5, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
                { day: 6, fromHour: 9, fromMin: 0, toHour: 17, toMin: 30 },
            ],
}


render() {
        const {
            days,
        } = this.state;

    return (
        <div>
            {
                    days.map((e, index) => (
                        <Card
                            key={e.day}
                            className={classes.card}>
                            <CardContent>
                                <TextField
                                    id="time"
                                    label="From Time"
                                    type="time"
                                    value={e.fromHour.toString().padStart(2, '0') + ":" + e.fromMin.toString().padStart(2, '0')}
                                    inputProps={{
                                        step: 300, // 5 min
                                    }}
                                />
                            </CardContent>
                        </Card>
                    ))}
        </div>
    );
}

ЗАМЕЧАНИЕ: функция времени дескриптора должна преобразоваться в строку для рендеринга.Однако значения привязаны к тем, которые я определил в моем состоянии.Как я могу изменить их?Спасибо за помощь.

Ответы [ 3 ]

0 голосов
/ 08 декабря 2018

Вам нужно прочитать об управляемых компонентах: https://reactjs.org/docs/forms.html

Значение текстового поля контролируется переменной состояния, которую вы использовали.Когда вы пытаетесь изменить значение ввода, оно не обновляется, потому что ваши переменные состояния не обновляются.Вам необходимо добавить обработчик события изменения в текстовое поле и обновить значение состояния при изменении ввода.Соответствующий код по ссылке:

  handleChange(event) {
    this.setState({value: event.target.value});
  }

В вашем случае вам придется разбирать значение на часы и минуты, чтобы установить их отдельно.Вам также нужно передать номер дня, чтобы вы могли обновить правильный элемент в массиве.Возможно, вы захотите переосмыслить свою структуру состояний и возьмете объект с номером дня, так как ключ может быть легче обновлять, чем имеющийся у вас массив.

0 голосов
/ 08 декабря 2018

Бурхан Б прав.В свой компонент TextField добавьте пропеллер onChange.Установите значение this.state.value или value, поскольку вы уже уничтожаете свое состояние.

Псевдокод

state = {
  days: [...], //your objects go here just omitted for the sake of space
  time: moment().format("insert your format") }
  ...
handleChange = time => {
  this.setState({ time }) 
}
render(){
  const { days, time } = this.state; 
  return (
   <div> ...
    <TextField
     id="time"
     label="From Time"
     type="time"
     value={time}
     onChange = {this.handleChange}
     inputProps={{
       step: 300, // 5 min
     }}
   />

момент (). Формат исходит от MomentJS.MomentJS - это пакет, который обрабатывает даты и время.В качестве альтернативы вы можете использовать Date-Fns.Я предлагаю использовать это, потому что похоже, что вы вручную пытаетесь отформатировать дату в своем значении, и я не уверен, что это лучший подход.Эти пакеты поставляются с форматированием и возвращают ISODate.Форматирование предназначено для внешнего интерфейса, а ISODate полезен для вашего бэкэнда (при условии, что вы отправляете это в БД).

Конечно, вам не нужно использовать ни один из этих пакетов.Если у вас нет другого компонента, который форматирует время для вас, или функции, которая форматирует время.Это делает код намного более читабельным и намного проще для обновления.

Надеюсь, это поможет.

0 голосов
/ 08 декабря 2018

Согласно документации Material-ui, свойство value textfied принимает следующее:

union: string |
 number |
 bool |
 arrayOf

Таким образом, ваша функция не оценивает

...