Как обрабатывать несколько флажков в компоненте React

Question

У меня есть React Component , который перебирает массив данных и отображает флажок для каждого объекта в массиве.

"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
  }
]

Большая часть этих данных отображается в Компонент класса реакции

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>
    ));
  }
}