Блог

Пытаюсь создать поле ввода чисел в React, где, как только пользователь нажимает на ввод, начальное значение очищается. Теперь, похоже, есть решения с текстовыми вводами, но я не видел, чтобы это делалось с числовыми вводами. Каждый раз, когда я пытался решить эту проблему, я всегда получаю «компонент изменяет контролируемый ввод типа number на неконтролируемый». Есть предложения? Вот краткая демонстрационная демонстрация codesandbox

Очистка ввода текста — это просто установка его значения в пустую строку. На самом деле вы можете сделать это и с помощью ввода чисел. (Фактически, значение, которое вы сохраняете, уже является строкой, хотя вы ввели его как number | undefined ).

 onFocus={() => setCount("")}
  

Демонстрация CodeSandbox

Для того, чтобы задать для ввода числа определенное значение, вам необходимо указать его в качестве аргумента при вызове функции ‘setCount()’, если вы хотите, чтобы значение по умолчанию было, например, 4:

 onFocus={() => setCount(4)}
  

пока вы просто вызываете его с неопределенным в качестве аргумента:

 onFocus={() => setCount(undefined)}
  

В данный момент код не работает, потому что вы пытаетесь установить содержимое поля ввода как неопределенное