javascript - 使用全选或单独选择多个复选框

Question

所以我遇到了一个小问题。我有一系列假期，如下所示:

export const holidays = {
  federal: [
    { name: "New Year's Day", selected: false },
    { name: 'Martin Luther King, Jr. Day', selected: false },
    { name: "George Washington's Birthday", selected: false },
    { name: 'Memorial Day', selected: false },
    { name: 'Independence Day', selected: false },
    { name: 'Labor Day', selected: false },
    { name: 'Columbus Day', selected: false },
    { name: 'Veterans Day', selected: false },
    { name: 'Thanksgiving Day', selected: false },
    { name: 'Christmas Day', selected: false }
  ],
  other: [
    { name: 'Black Friday', selected: false },
    { name: 'Christmas Eve', selected: false },
    { name: "New Year's Eve", selected: false }
  ]
};

我的目标是呈现 2 个假期列表 - 一个带有 Federal Holidays 标签，另一个带有 Other Holidays 标签。我需要能够使用 Add all 选项选中所有复选框，而且我还需要能够单独选中复选框。

现在，只有我的Add all 功能在工作。这是我的代码:

// CheckboxList component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import camelCase from 'lodash';

import Checkbox from 'common/components/Checkbox';

class CheckList extends Component {
  static propTypes = {
    data: PropTypes.array,
    id: PropTypes.string.isRequired
  };

  ...

  get checkboxList() {
    const { data } = this.props;
    const { checked } = this.state;

    return data.map(item => (
      <Checkbox
        id={camelCase(item)}
        key={camelCase(item)}
        checked={checked}
        label={item}
      />
    ));
  }

  handleSelectAllCheckboxToggle() {
    this.setState(({ checked }) => ({ checked: !checked }));
  }

  render() {
    const { id } = this.props;

    return (
      <div className={this.baseClass}>
        <Checkbox
          id={id}
          label="Add all"
          onChange={this.handleSelectAllCheckboxToggle}
        />

        {this.checkboxList}
      </div>
    );
  }
}

上面是一个可重用的组件，它基本上根据传入组件的 data 属性 (array) 中的项目数量来呈现带有标签的复选框。然后将这个可重用组件传递给将要呈现复选框列表的父组件:

// HolidaySchedule component

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import camelCase from 'lodash/camelCase';

import { holidays } from 'modules/utilities/constants';

import CheckboxList from './CheckboxList';
import Panel from 'common/components/Panel';

class HolidaySchedule extends Component {
  get holidaysList() {
    return Object.keys(holidays).map(holiday => (
      <CheckboxList
        key={camelCase(holiday)}
        data={this.holidaysData(holiday)}
        id={`${holiday}Holidays`}
      />
    ));
  }

  holidaysData(type) {
    return holidays[type].map(holiday => holiday.name);
  }

  render() {
    return (
      <Panel>
        {this.holidaysList}
      </Panel>
    );
  }
}

这一切最终会呈现一个以假期作为标签的复选框列表:

抱歉，我的帖子有点长而且有深度，我只是想确保我没有遗漏任何内容。单击每组复选框(联邦或其他)的全部添加时的功能正常。

但是，我不知道该怎么做才能添加可以单独选中复选框的功能。我一次只能选择一个复选框，并且取消选择前一个复选框。我希望能够 Add all 选择所有复选框，单击其中一个复选框以取消选中它并取消选择 Add all 复选框，并且也只需选择一个复选框一个时间。难倒了!

如果有人花时间完成所有这些，谢谢你!如果有人有任何建议或指导，那么再感谢你一百万倍!!!!

Answer 1

Give a man a fish, and you feed him for a day. Teach a man to fish, and you feed him for a lifetime

您正在寻找这样的东西吗？我想这就是您正在寻找的逻辑。

我已经为您编写了一个带有全选功能的复选框列表演示。这只是逻辑，没什么好看的。

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  const [holidays, setHolidays] = React.useState({
    federal: [
      { name: "New Year's Day", selected: false },
      { name: "Martin Luther King, Jr. Day", selected: false },
      { name: "George Washington's Birthday", selected: false },
      { name: "Memorial Day", selected: false },
      { name: "Independence Day", selected: false },
      { name: "Labor Day", selected: false },
      { name: "Columbus Day", selected: false },
      { name: "Veterans Day", selected: false },
      { name: "Thanksgiving Day", selected: false },
      { name: "Christmas Day", selected: false }
    ],
    other: [
      { name: "Black Friday", selected: false },
      { name: "Christmas Eve", selected: false },
      { name: "New Year's Eve", selected: false }
    ]
  });

  const handleOnChange = (e, type) => {
    const { name, checked } = e.target;
    const newHoliday = [...holidays[type]];
    const index = newHoliday.findIndex(h => h.name === name);
    if (index > -1) {
      newHoliday[index] = { name, selected: checked };
    }
    setHolidays(h => ({ ...h, [type]: newHoliday }));
  };

  const handleOnSelectAll = (e, type) => {
    const { checked } = e.target;
    let newHoliday = [...holidays[type]];
    if (!checked) {
      newHoliday = newHoliday.map(opt => ({ ...opt, selected: false }));
    } else {
      newHoliday = newHoliday.map(opt => ({ ...opt, selected: true }));
    }
    setHolidays(h => ({ ...h, [type]: newHoliday }));
  };

  const renderCheckboxList = (options, type) =>
    options.map(opt => (
      <div>
        <label>
          <input
            type="checkbox"
            name={opt.name}
            onChange={e => handleOnChange(e, type)}
            checked={opt.selected}
          />
          {opt.name}
        </label>
      </div>
    ));

  const renderSelectAllCheckbox = type => (
    <div>
      <label>
        <input
          type="checkbox"
          onChange={e => handleOnSelectAll(e, type)}
          checked={holidays[type].every(opt => opt.selected)}
        />
        {`Select All ${type}`}
      </label>
    </div>
  );

  return (
    <section style={{ display: "flex", justifyContent: "space-around" }}>
      <div>
        <div>
          <fieldset>
            Federal Holidays
            {renderSelectAllCheckbox("federal")}
            {renderCheckboxList(holidays.federal, "federal")}
          </fieldset>
        </div>
        <div>
          <fieldset>
            Other Holidays
            {renderSelectAllCheckbox("other")}
            {renderCheckboxList(holidays.other, "other")}
          </fieldset>
        </div>
      </div>
      <div>
        State:
        <pre>{JSON.stringify(holidays, null, 2)}</pre>
      </div>
    </section>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

给你一些提示，如果你希望最终的值是数组形式，你可以使用filter和map来获取选项的name。

这是一个工作示例:https://codesandbox.io/s/react-controlled-checkbox-list-f4t7g?fontsize=14&hidenavigation=1&theme=dark

更新(2019 年 11 月 14 日)

我使用 React 类重新创建了另一个沙盒演示。这一次，我创建了一个与您的组件 (CheckboxList) 类似的组件，它具有 name 和 onChange 回调。使用这些 Prop 可以让你更新你 parent 的 holidays 状态。

您可以在此处找到工作示例:https://codesandbox.io/s/react-class-controlled-checkbox-list-ejlfn?fontsize=14&hidenavigation=1&theme=dark

我认为您缺少的是 onChange 回调，用于在每次对复选框进行更改时更新您的父状态。您的代码缺少一些重要的东西。