React JS как с помощью input checkbox изменить значение компонента (объекта)?

Рейтинг: 0Ответов: 1Опубликовано: 19.01.2023

В моем проекте есть множество таблиц, поля которых должны отображаться/скрываться по желанию пользователя. В json у каждого поля есть свойство isVisible и оно по умолчанию true. В проекте есть компонент, вызываемый по клику на таблицу, со списком всех полей таблицы и чекбоксами у каждого поля. По умолчанию все чекбоксы должны быть чекнуты, раз в json isVisible прописано true.

Как прописать функцию чтобы при клике по чекбоксу галочка снималась и значение у поля становилось isVisible = false? И обратно true при следующем клике

вот код компонента где handleToggle - попытка приблизиться к решению:

export const SideBarNavigation = ({
    table: selectedTable,
}) => {
const [checkedColumn, setCheckedColumn] = useState(null);
    const [visibilityColumn, setVisibilityColumn] = useState(null);

    const handleToggle = () => {
        let myColumn = [];
        Object.assign(myColumn, selectedTable.columns);
        for (let i = 0; i < myColumn.length; i++) {
            if (myColumn[i].isVisible === true) {
                setCheckedColumn(true);
                setVisibilityColumn(true);
            } else {
                setCheckedColumn(false);
                setVisibilityColumn(false);
            }
        }
    }
 return (
        <>
<div className={styles.FieldsHeaderContainer}>
                        <label for="side-checkbox">Поля таблицы:</label>
                        
                    </div>
                    <div
                        className={styles.FieldsContainer}
                        //style={{ borderColor: color }}
                    >
                        {selectedTable.columns?.map((column) => {
                            let components = [];
                            components.push(
                                <div className={styles.NameContainer}>
                                    <Column column={column} key={column.name} />
                                    <input
                                        type="checkbox"
                                        name={column.name}
                                        value={column.name}
                                        //checked={checkedColumn}
                                        key={column.originalColumnId}
                                        onChange={(value) => handleInputChange(value)}
                                    />
                                </div>
                            );
                            return components;
                        })}
                    </div>
        </>
    );
};
javascript reactjs
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Реализовать настройку видимости полей можно при помощи индекса элемента массива, из которого поля отрисовываются.

Минимальный рабочий пример:

const selectTable = {
  columns: [
    { name: "Имя", isVisible: true },
    { name: "Тип", isVisible: true },
    { name: "Вид", isVisible: true },
    { name: "Род", isVisible: true }
  ]
};

const SideBarNavigation = () => {
  const [table, setTable] = useState(selectTable);

  const checkClick = (idx) => {
    const tableChange = { ...table };
    tableChange.columns[idx].isVisible = !tableChange.columns[idx].isVisible;
    setTable(tableChange);
  };

  return (
    <>
      <h1>Управление отображаемыми полями</h1>
      <div>
        {" "}
        Настройки
        {table.columns?.map((col, idx) => (
          <div>
            <span>{col.name}: </span>
            <input
              type="checkbox"
              checked={col.isVisible}
              onClick={() => checkClick(idx)}
            />
          </div>
        ))}
      </div>
      <hr />
      <div>
        {table.columns
          ?.filter((el) => el.isVisible)
          .map((column) => (
            <div>{column.name}</div>
          ))}
      </div>
    </>
  );
};