如何处理 React 组件中的多个复选框

Question

我有一个 React 组件，它循环遍历数据数组并为数组中的每个对象呈现一个复选框。

"supplies": [{
    "deviceName": "OMEGAX d3241",
    "productName": "ZA1239",
    "productGroup": "hearing aid batteries",
    "productId": "1",
    "lastOrderDate": "2020-01-01",
    "nextAvailabilityDate": "2020-09-01",
    "quantity": 60
  },
  {
    "productGroup": "hearing aid accessories",
    "productId": "3",
    "availableForReorder": true,
    "lastOrderDate": "2019-06-30",
    "nextAvailabilityDate": "2019-12-15",
    "quantity": 10,
    "size": "6mm"
  },
  {
    "productName": "DOME",
    "productGroup": "hearing aid accessories",
    "productId": "4",
    "availableForReorder": true,
    "lastOrderDate": "2019-06-30",
    "nextAvailabilityDate": "2019-12-15",
    "quantity": 10,
    "size": "7mm"
  },
  {
    "productName": "WaxBuster Single Unit",
    "productGroup": "hearing aid accessories",
    "productId": "5",
    "availableForReorder": true,
    "lastOrderDate": "2019-06-30",
    "nextAvailabilityDate": "2019-12-15",
    "quantity": 10
  }
]

大部分数据显示在 React 类组件

class SelectArrayItemsWidget extends React.Component {
  state = {
    checkedSupplies: new Map(),
  };
  componentDidMount() {
    this.props.getReOrderBatteryAndAccessoriesInformationData();
  }

  handleChecked = e => {
    const supply = e.target.name;
    const isChecked = e.target.checked;
    this.setState(prevState => ({
      checkedSupplies: prevState.checkedSupplies.set(supply, isChecked),
    }));
  };

  render() {
    const { supplies } = this.props;
    const { isChecked, checkedSupplies } = this.state;

    return supplies.map(supply => (
      <div key={supply.productId} className="order-background">
        <p className="ds-u-font-size--md ds-u-font-weight--bold">
          {supply.productName}
        </p>
        <div className="ds-u-border-left--10px ds-u-border-color--primary-alt">
          <div className="usa-alert-body mdot-alert-body">
            <p className="ds-u-margin--1px">
              <span className="ds-u-font-weight--bold">Battery: </span>
              {supply.productId}
            </p>
            <p className="ds-u-margin--1px">
              <span className="ds-u-font-weight--bold">Quantity: </span>
              {supply.quantity} <br />
              Approximately {supply.quantity} months supply
            </p>
            <p className="ds-u-margin--1px">
              <span className="ds-u-font-weight--bold">Last order date: </span>{' '}
              {moment(supply.lastOrderDate).format('MM/DD/YYYY')}
            </p>
          </div>
        </div>
        <div
          className={
            !isChecked
              ? 'ds-u-background-color--white ds-u-color--link-default button-dimensions ds-u-border-color--primary ds-u-border--2px'
              : 'ds-u-background-color--primary button-dimensions ds-u-color--white ds-u-border-color--primary ds-u-border--2px'
          }
        >
          <input
            name={supply.productId}
            checked={!checkedSupplies.get(supply.productId)}
            type="checkbox"
            onChange={this.handleChecked}
          />
          <label htmlFor={supply.productId} className="main">
            Order batteries for this device
          </label>
        </div>
      </div>
    ));
  }
}

我希望每个复选框的包装 div 更改文本颜色和背景颜色，具体取决于是否选中了单个复选框。我在容器上运行一个条件： !isChecked ? 'vads-u-background-color--white vads-u-color--link-default button-dimensions vads-u-border-color--primary vads-u-border--2px' : 'vads-u-background-color--primary button-dimensions vads-u-color--white vads-u-border-color--primary vads-u-border--2px'

但是，每次选中复选框时，容器都不会更改其样式属性。

Answer 1

这是问题的答案。

首先，我在全局状态中创建了一个 selectedItems 数组。

然后我更改了handleChecked onChange 方法，将复选框添加到selectedItems 数组中。

然后任何selectedItems 是checked 并且具有productId 的checkbox container 的样式将会改变。

查看完整代码：

class SelectArrayItemsWidget extends React.Component {
  state = {
    selectedItems: [],
  };
  componentDidMount() {
    this.props.getReOrderBatteryAndAccessoriesInformationData();
  }

  handleChecked = e => {
    e.persist();
    if (e.target.checked) {
      this.setState(prevState => ({
        selectedItems: prevState.selectedItems.concat(e.target.name),
      }));
    } else {
      this.setState(prevState => ({
        selectedItems: prevState.selectedItems.filter(i => i !== e.target.name),
      }));
    }
  };

  render() {
    const { supplies } = this.props;
    const { selectedItems } = this.state;

    return supplies.map(supply => (
      <div key={supply.productId} className="order-background">
        <p className="vads-u-font-size--md vads-u-font-weight--bold">
          {supply.productName}
        </p>
        <div className="vads-u-border-left--10px vads-u-border-color--primary-alt">
          <div className="usa-alert-body mdot-alert-body">
            <p className="vads-u-margin--1px">
              <span className="vads-u-font-weight--bold">Battery: </span>
              {supply.productId}
            </p>
            <p className="vads-u-margin--1px">
              <span className="vads-u-font-weight--bold">Quantity: </span>
              {supply.quantity} <br />
              Approximately {supply.quantity} months supply
            </p>
            <p className="vads-u-margin--1px">
              <span className="vads-u-font-weight--bold">
                Last order date:{' '}
              </span>{' '}
              {moment(supply.lastOrderDate).format('MM/DD/YYYY')}
            </p>
          </div>
        </div>
        <div
          className={
            selectedItems.includes(supply.productId)
              ? 'vads-u-background-color--primary button-dimensions vads-u-color--white vads-u-border-color--primary vads-u-border--2px'
              : 'vads-u-background-color--white vads-u-color--link-default button-dimensions vads-u-border-color--primary vads-u-border--2px'
          }
        >
          <input
            name={supply.productId}
            type="checkbox"
            onChange={this.handleChecked}
          />
          <label htmlFor={supply.productId} className="main">
            Order batteries for this device
          </label>
        </div>
      </div>
    ));
  }
}