Блог

Главная - Вопросы по программированию - Ввод, показывающий заполнитель вместо значения

Ввод, показывающий заполнитель вместо значения

#javascript #reactjs #input

Вопрос:

У меня возникли проблемы с настройкой ввода для отображения заполнителя вместо отображения значения из состояния.

   const initialState = [
    {
      name: "Chris",
      age: 0,
      height: 0,
      weight: 0,
    },
  ];

const [infoValue, setInfoValue] = useState(initialState)

    <div>
     <input type="number" placeholder={0} value={infoValue.age} onClick={} onChange={} />
    </div>

Есть ли что-то, что я могу сделать в onChange или onClick, где пользователь может просто ввести свои значения, не удаляя сначала начальный 0?

Комментарии:

1. Причина в том, что информация ценна. возраст равен 0 в начале, вам нужно поставить пустую строку, чтобы достичь того, чего вы хотите.

Ответ №1:

Начальное значение равно 0, поэтому оно будет отображаться в поле. Пустая строка может сработать.

 <input type="number" placeholder="0" value="" />

Приведенный выше фрагмент был для демонстрации, вам просто нужно изменить значение age свойства в своем коде.

  const initialState = [
    {
      name: "Chris",
      age: '',
      height: 0,
      weight: 0,
    },
  ];

Ответ №2:

Это ответ, если вы хотите, чтобы возраст в штате начинался с 0.

      const initialState = [
    {
      name: "Chris",
      age: 0,
      height: 0,
      weight: 0,
    },
  ];

const [infoValue, setInfoValue] = useState(initialState)

    <div>
     <input type="number" placeholder={0} value={infoValue.age||''} onClick={} onChange={} />
    </div>

Комментарии:

1. это сработало отлично, большое вам спасибо!

2. Обязательно примите ответ, если это сработало для вас 🙂

Ответ №3:

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

   const initialState = {
  name: "Chris",
  age: 0,
  height: 0,
  weight: 0,
  },

;

const [infoValue, setInfoValue] = Состояние использования(начальное состояние)

 <div>
 <input type="number" placeholder={0} value={infoValue.age} onChange={(e) => setInfoValue({...infoValue, age: e.target.value )} />
</div>
Метки: ,