Инициализация контролируемого ввода React с пустым значением и type = "number" - PullRequest
Новая
       4

Инициализация контролируемого ввода React с пустым значением и type = "number"

1 голос
/ 21 мая 2019

Проблема:

У меня есть контролируемый ввод, используя Material-UI TextField. Я хочу иметь только цифры и поддерживать type = "number" для мобильных клавиатур, но когда по умолчанию используется пустая строка и в parseInt в onChange, он не допустит 0 (ноль). Все остальные номера отображаются правильно.

Он даже правильно устанавливает 0 в базовом объекте, связанном с TextField.

В других входных данных у меня есть значения по умолчанию в виде пустых строк (сильно упрощено), как показано: 

<TextField
    name={"inputToBeSaved"}
    value={this.state.objectForSaving.inputToBeSaved|| ''}
    onChange={this.handleChange}
    variant="outlined"
/>

С соответствующей ручкой. Изменить: 

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState(prevState => ({
        objectForSaving: {
            ...prevState.objectForSaving,
            [name]: value
        }
    }))
}

Приведенный выше пример работает должным образом, но не при попытке работать с числами: 

<TextField
    type="number"
    name={"numberToBeSaved"}
    value={this.state.objectForSaving.numberToBeSaved|| ''}
    onChange={this.handleChange}
    variant="outlined"
/>

handleChange(event) {
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.type === 'number' ? parseInt(target.value) : target.value;
    const name = target.name;
    this.setState(prevState => ({
        objectForSaving: {
            ...prevState.objectForSaving,
            [name]: value
        }
    }))
}

Я знаю, что значение по умолчанию 0 или неконтролируемое исправит это, но иногда у меня есть значения с сервера, поэтому я хочу повторно использовать компоненты.

Я пытался просмотреть этот пост, но не нашел хорошего решения, чтобы держать его под контролем: Инициализация управления вводом числа React с пустым значением?

Ответы [ 2 ]

1 голос
/ 21 мая 2019

0 - фальси, поэтому в следующем состоянии: 

this.state.objectForSaving.numberToBeSaved|| ''

если numberToBeSaved равно 0, выражение будет выглядеть как пустая строка.

Если вы просто пытаетесь проверить, определено ли numberToBeSaved, вы можете сделать это более надежно с помощью: 

this.state.objectForSaving.numberToBeSaved === undefined ? '' : this.state.objectForSaving.numberToBeSaved
0 голосов
/ 21 мая 2019

Вы можете преобразовать значение в строку при установке TextField prop. 

const {
  objectForSaving: {
    inputToBeSaved = '',
  },
} = this.state

<TextField
  name={"inputToBeSaved"}
  value={String(inputToBeSaved)}
  onChange={this.handleChange}
  variant="outlined"
/>
...