Как получить значения отмеченного флажка и вывести его в поле ввода

Я пытаюсь получить проверенные значения флажка, а затем отобразить их в поле. У меня есть два файла: индекс с полем ввода, а затем флажок установлен в модальном режиме, который является другим компонентом, selectlanguage. Я хочу, чтобы, когда пользователь устанавливает один или несколько флажков, значение (я) появлялось на входе, а когда оно не было отмечено, значение покидало поле.

В настоящее время я могу добиться только одного значения, отображаемого в поле ввода.

Вот фрагмент кода.

index.js

import React, { useState } from "react";
import SelectLanguage from "../../components/modal/selectLanguage";

const index = () => {
const [chosenLanguage, setChosenLanguage] = useState([]);

function checkLanguage(e) {
  setChosenLanguage(e.target.name);
};

<label className="relative block p-3 border-b-2 border-gray-200 w-full" for="languages">
  <span for="languages">languages</span>
  <input
    id="languages"
    type="text"
    placeholder="Spanish, Arabic"
    autoComplete="off"
    onClick={languageShowModal}
    value={chosenLanguage}
  />
</label>
}

export default index;

selectlanguage.js

import { useState } from "react";

export default function SelectLanguage({ open, handleClose, checkLanguage }) {
  const handleCheckbox = (e) => {
    alert(e.target.name);
  };

  return open ? (
    <div>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>spanish</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>french</span>
      </label>
      <label>
        <input type="checkbox" name="spanish" onChange={checkLanguage} />
        <span>arabic</span>
      </label>
    </div>
  ) : (
    ""
  );
}

Я думаю, что то, как вы называете setChosenLanguage(e.target.name), неправильно. Сначала вы устанавливаете его в массив, но затем просто переопределяете его одним значением. Вместо этого вы можете добавить/удалить значение в массив. setChosenLanguage([...chosenLanguage, e.target.name]);

szczocik 17.05.2022 16:14

@szczocik, спасибо за это, в какой-то степени это работает, но теперь, когда я устанавливаю флажок, он добавляет его в список, а я снимаю флажок, он все равно добавляет его в список. Как я могу добавить только проверенные элементы?

oyerohabib 17.05.2022 16:46
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
2
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Мне не совсем понятно, как вы все подключили, но хорошей стратегией является отражать состояние DOM в ваше состояние React (Управляемые компоненты), а затем иметь способ отображения этого состояния. В вашем случае вы хотите сохранить состояние набора флажков, и один из способов сделать это — с помощью карты.

export const MyComponent = () => {
  const [ chosenLanguages, setChosenLanguages ] = useState({})

  const checkLanguage = (e) => {
    setChosenLanguages(prev => ({
      ...prev,
      [e.target.value]: e.target.checked,
    }))
  }

  const showLanguages = () => {
    return Object.entries(chosenLanguages)
      .filter(([_, checked]) => checked)
      .map(([name, _]) => name)
      .join(', ')
  }

  return (
    <input value={showLanguages()} />
  )
}

Вместо массива chosenLanguages — это отображение названий языков в их проверенное состояние, например:

{
  arabic: true,
  spanish: false,
  french: true,
}

Когда вы сохранили свое состояние таким образом, вы можете преобразовать его любым способом при рендеринге.

Спасибо за ответ. Использование «e.target.value» не сработало, так как я только «включался» в поле, мне пришлось изменить его на «e.target.name», так как у меня уже был атрибут имени в разных входных тегах. . Это был хороший способ сделать это?

oyerohabib 17.05.2022 20:57

Кроме того, я хотел бы спросить, у меня есть первое значение входных тегов, которое должно быть проверено по умолчанию, как я могу убедиться, что оно уже указано в поле, или мне нужно жестко закодировать его в состоянии «chosenLanguage». .

oyerohabib 17.05.2022 20:59

Хорошие вопросы, обычно флажки, которые связаны друг с другом, имеют одинаковые name, но разные value, поэтому я использовал здесь значение. См.: developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/…

Auroratide 17.05.2022 21:02

Что касается второго вопроса, ссылка, которую я предоставил на Controlled Components, должна дать подсказку. Предоставление состояния по умолчанию для chosenLanguage является хорошей практикой, если вы заставляете входы флажка также иметь его состояние, например checked={chosenLanguages.arabic}.

Auroratide 17.05.2022 21:04

Другие вопросы по теме