Состояние чекбокса с множественным выбором

ReactReactBeginner
Практиковаться сейчас

This tutorial is from open-source community. Access the source code

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL react(("React")) -.-> react/AdvancedConceptsGroup(["Advanced Concepts"]) react(("React")) -.-> react/StateManagementGroup(["State Management"]) react(("React")) -.-> react/FundamentalsGroup(["Fundamentals"]) react/FundamentalsGroup -.-> react/jsx("JSX") react/FundamentalsGroup -.-> react/event_handling("Handling Events") react/FundamentalsGroup -.-> react/list_keys("Lists and Keys") react/AdvancedConceptsGroup -.-> react/hooks("React Hooks") react/StateManagementGroup -.-> react/use_state_reducer("Using useState and useReducer") subgraph Lab Skills react/jsx -.-> lab-38357{{"Состояние чекбокса с множественным выбором"}} react/event_handling -.-> lab-38357{{"Состояние чекбокса с множественным выбором"}} react/list_keys -.-> lab-38357{{"Состояние чекбокса с множественным выбором"}} react/hooks -.-> lab-38357{{"Состояние чекбокса с множественным выбором"}} react/use_state_reducer -.-> lab-38357{{"Состояние чекбокса с множественным выбором"}} end

Состояние чекбокса с множественным выбором

В ВМ уже предоставлены index.html и script.js. В общем, вам нужно только добавить код в script.js и style.css.

Этот код отображает список чекбоксов и отправляет выбранное значение или значения в родительский компонент с использованием обратного вызова. Вот шаги по созданию этого:

  1. Используйте хук useState(), чтобы инициализировать переменную состояния data с помощью свойства options.
  2. Создайте функцию toggle, которая обновляет переменную состояния data с выбранным вариантом или вариантами и вызывает функцию обратного вызова onChange с ними.
  3. Создайте карту переменной состояния data, чтобы сгенерировать отдельные чекбоксы и их метки. Свяжите функцию toggle с обработчиком onClick каждого чекбокса.
const MultiselectCheckbox = ({ options, onChange }) => {
  const [data, setData] = React.useState(options);

  const toggle = (index) => {
    const newData = [...data];
    newData[index] = {
      ...newData[index],
      checked: !newData[index].checked
    };
    setData(newData);
    onChange(newData.filter((item) => item.checked));
  };

  return (
    <>
      {data.map((item, index) => (
        <label key={item.label}>
          <input
            type="checkbox"
            checked={item.checked || false}
            onChange={() => toggle(index)}
          />
          {item.label}
        </label>
      ))}
    </>
  );
};

Вот пример использования этого:

const options = [{ label: "Item One" }, { label: "Item Two" }];

ReactDOM.createRoot(document.getElementById("root")).render(
  <MultiselectCheckbox
    options={options}
    onChange={(selected) => {
      console.log(selected);
    }}
  />
);

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по созданию состояния чекбокса с множественным выбором. Вы можете попробовать еще несколько практических занятий в LabEx, чтобы улучшить свои навыки.