0

В моем проекте есть множество таблиц, поля которых должны отображаться/скрываться по желанию пользователя. В 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>
        </>
    );
};
1
  • как вариант - использовать булево значение isVisible как значение для атрибута checked соответствующего чекбокса. и в оnChange менять isVisible. которое лучше сделать состоянием
    – sterx
    19 янв в 16:25

1 ответ 1

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>
    </>
  );
};
3
  • Тестировал в песочнице. Компонент SideBarNavigation
    – SwaD
    19 янв в 16:30
  • круто работает) А если отображаемые поля находятся в компоненте Table? Это родительский компонент, мне из SideBarNavigation (дочерний компонент) надо передать это обновление к родителю, потому что поля по клику на чекбокс должны скрываться/появляться у Table. Как такое можно передать? {table.columns ?.filter((el) => el.isVisible) .map((column) => ( <div>{column.name}</div> ))} в таком случае не работает
    – MIA
    20 янв в 7:00
  • сама поняла, как сделать) Спасибо огромное!)
    – MIA
    20 янв в 7:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.