切换为单独显示

Question

我想单独切换列表..应该如何进行？

 .map((item) => {
                    return (
                   <>
                       <StyledTableRow key={item.medName}>
                      <button onClick={() => setToggle(!toggle)}>
                        <StyledTableCell component="th" scope="row">
                          {item.medName}
                        </StyledTableCell></button>
                        {toggle && <StyledTableCell align="center" >
                          {item.saltName}
                        </StyledTableCell>
                      </StyledTableRow>
                      </>

Answer 1

不是为每个元素存储单个布尔状态值，而是存储一个 id 或其他一些可以独立 set/checked.

的唯一属性

示例：

const [toggled, setToggled] = React.useState({});

const toggleHandler = id => {
  setToggled(ids => ({
    ...ids,
    [id]: !ids[id], // <-- toggle specific element by key
  }));
};

...

.map((item) => {
  return (
    <>
      <StyledTableRow key={item.medName}>
        <button onClick={() => toggleHandler(ite.medName)}> // <-- pass property
          <StyledTableCell component="th" scope="row">
            {item.medName}
          </StyledTableCell>
        </button>
        {toggle[item.medName] && ( // <-- check property
          <StyledTableCell align="center">
            {item.saltName}
          </StyledTableCell>
        )}
      </StyledTableRow>
    </>
  );
})

切换为单独显示

Toggle to display separately

api

reactjs

react-hooks