Блог

Неактивное Состояние:

Активное Состояние:

Когда я переключаю одну кнопку, состояние всех остальных кнопок меняется, чего я не хочу. Есть ли какой-либо способ контролировать состояние этих переключателей по отдельности

Это мой код для столбцов, которые будут использоваться в таблице:

 const COLUMNS = useMemo (() => [
      {
    Header: "Username",
    accessor: "Username",
    textAlign: "left",
    sortable: false,
    },
    {
    Header: "Status",
      accessor: "Status",
      textAlign: "center",
      Cell: ({ value, cell: { row } }) => (
        <div>
        <FormControlLabel
          control={
            <IOSSwitch
              checked={status}
              onClick={toggler}
              name="status"
            />
          }
          />
          
          {status ? <span>Active</span> : <span>Inactive</span>}
         
          </div>
      ),
    },
 

Это мой код для таблицы:

 <Table {...getTableProps()}>
              <thead>
                {headerGroups.map((headerGroup) => (
                  <tr {...headerGroup.getHeaderGroupProps()}>
                    {headerGroup.headers.map((column) => (
                      <Th
                        {...column.getHeaderProps({
                          style: { textAlign: column.textAlign },
                        })}
                      >
                        {column.render("Header")}
                      </Th>
                    ))}
                  </tr>
                ))}
              </thead>
              <tbody {...getTableBodyProps()}>
                {page.map((row) => {
                  prepareRow(row);
                  return (
                    <Tr {...row.getRowProps()}>
                      {row.cells.map((cell) => {
                        return (
                          <Td
                            {...cell.getCellProps({
                              style: { textAlign: cell.column.textAlign },
                            })}
                          >
                            {cell.render("Cell")}
                          </Td>
                        );
                      })}
                    </Tr>
                  );
                })}
              </tbody>
            </Table>
 

Вы должны назначить каждой кнопке ее отдельное состояние, например, у вас может быть три состояния для трех кнопок.

ваши штаты должны выглядеть так:

 const [firstButton, setFirstButton] = useState(false)
const [secondButton, setSecondButton] = useState(false)
const [thirdButton, setThirdButton] = useState(false)
 

и в своих кликах вы должны сказать:

например, для второй кнопки:

 onClick={()=>setSecondButton(false)}
 

и когда вы хотите использовать это состояние в своей таблице, вы должны сопоставлять каждую кнопку с ее состоянием

ps: если ваше количество кнопок не исправлено, вы должны написать функцию, чтобы вернуть объект, ключи которого являются именами кнопок, а значения-ложными ( значение по умолчанию-ложь, и это должно изменяться при щелчках ).

Из-за неизменности состояний в react.js, вы должны клонировать состояние и изменить то, что вы хотите, а все остальное оставить как есть, а затем обновить все состояние.

и используйте его, как:

 onClick={()=>setButtonsState({...buttonsState, secondButton:false})}
 

где buttonState-это как:

 const [buttonsState, setButtonsState] = useState(
{
  firstButton: false,
  secondButton: false,
  thirdButton: false
}
)