Блог

Я хотел бы попросить о помощи. Я новичок в react и застрял при создании обработчика проверки. Мне нужно получить элемент из состояния и выполнить этот обработчик только для выбранного элемента. Я думаю, что при установке / снятии флажка обработчик должен установить состояние — проверено: истина / ложь только для выбранного элемента. Я застрял, как установить состояние для выбранного элемента. Мой обработчик выполняется для всех элементов.

     import React, { Component, createContext } from "react";
    import uuid from "react-uuid";
    import { warehouseProducts } from "./data";

    const ProductContext = createContext();

    class ProductProvider extends Component {
      state = {
        products: [],
        detailProduct: "",
        editItem: "",
        isDisabled: true,
        checked: true,
      };

     [...]

    checkHandler = (id) => {
        const product = this.state.products.filter(item => item.id === id);
        this.setState(() => {
          return { checked:!this.state.checked };
        });
      }
  

Другой компонент, в котором я применяю этот контрольный обработчик:

       [...]
       <ProductConsumer>
          {(value) => (
            <>
              <td style={{ width: "60px" }}>
                <input
                  type="checkbox"
                  onChange={()=>value.checkHandler(id)}
                  defaultChecked={value.checked}
                />
              </td>

              <td style={{ width: "250px" }}>
                <Link to="/products/{id}">
                  {value.checked ? (
                    <button
                      className="View"
                      onClick={() => value.productDetailHandler(id)}
                    >
                      View
                    </button>
                  ) : (
                    value.isDisabled
                  )}
                </Link>
  

Чего-то подобного было бы достаточно. Фильтруйте в соответствии с выбранным идентификатором и установите флажок true.

   checkHandler = (id) => {
      const updatedProducts = this.state.products.map(product => {
        if (product.id === id) return { ...product, checked: true };
        return { ...product, checked: false};
      })
        this.setState({ products: updatedProducts });
      }