В react как мне получить только последнее значение для функции onchange

#reactjs #onchange

Вопрос:

Я новичок в react. Я хотел бы получить значение из входных данных в массиве объектов. Но при onChange ввода он добавляет все буквы в массив. Я бы хотел собрать только последнюю запись. Как я могу это сделать?

  <input
                type="text"
                placeholder="Ecrivez votre question"
                onChange={(event) => {
                  let tab = [...questionsTitle];
                  tab.push({
                    index: index,
                    type: questionType[index],
                    title: event.target.value,
                  });
                  setQuestionsTitle(tab);
                }}
              ></input>

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

Заранее благодарю вас.

скриншот

Ответ №1:

Обновите значение, если оно уже существует, в противном случае отправьте новый объект. Ниже приведен пример кода

 <input
type="text"
placeholder="Ecrivez votre question"
onChange={(event) => {
    let tab = [...questionsTitle];
    let tabIndex = tab.findIndex(x => x.index === index);
    if (tabIndex !== -1) {
        tab[tabIndex].type = questionType[index]
        tab[tabIndex].title = event.target.value
    } else {
        tab.push({
            index: index,
            type: questionType[index],
            title: event.target.value,
        });
    }
    setQuestionsTitle(tab);
}}

1. Это работает, спасибо! Не могли бы вы объяснить мне эту строку? пусть tabIndex = tab.findIndex(x => x.index === index); Я не понимаю эту часть: x => x.index

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

3. ОК. Я впервые увидел, что это написано так. Большое вам спасибо за объяснение.

Ответ №2:

Вы можете захватить последнее, используя квадратные скобки, например, event.target.value[-1] Вы можете скопировать приведенный ниже код.

  <input
            type="text"
            placeholder="Ecrivez votre question"
            onChange={(event) => {
              let tab = [...questionsTitle];
              tab.push({
                index: index,
                type: questionType[index],
                title: event.target.value[-1],
              });
              setQuestionsTitle(tab);
            }}
          ></input>

1. Спасибо за ваш ответ. Это не работает. У меня все еще много записей, но теперь заголовок не определен.

2. мне нужно было получить длину let length = e.target.value.length; первого, затем setAnswer(e.target.value[length - 1])