在 ReactJS 中单击时切换按钮名称

Question

我有一个对象数组。 因此，对于每个具有 subItems 的 object，我正在尝试为其添加一个按钮。 单击特定按钮时，特定按钮的名称应在“展开”和“隐藏”之间切换。 我正在使用 map 展示它们。

export default function App() {

  const [button,setButton] = useState([
    {pin: 'Expand', id: 0},
    {pin: 'Expand', id: 1},
    {pin: 'Expand', id: 2},
  ]);

  const dataObj = [
    {
      title: 'Home'
    },
    {
      title: 'Service',
      subItems: ['cooking','sleeping']
    },
    {
      title: 'Contact',
      subItems: ['phone','mobile']
    }
  ];

  const expandFunc = (ind) => {
   // toggle logic here
  }
  return (
    <div className="App">
      {
        dataObj.map((arr,ind) => (
          <div>
            <span>{arr.title}:</span>
            {
              // console.log(ind)
              arr.subItems && 
              <button onClick={() => expandFunc(ind)}>{button[ind].pin}</button>
            }
          </div>
        ))
      }
    </div>
  );
}

这就是 output 的外观 -

如果我单击服务按钮，则按钮名称应在“扩展”和“隐藏”之间切换。 有人可以帮我解决这个问题吗？

Answer 1

您需要通过根据当前 state 确定新pin来更新 state，尝试使用Array.map ：

const expandFunc = (ind) => {
    const togglePin = oldPin => oldPin === "Expand" ? "Hide" : "Expand";
    const updatedButtons = button.map((btn, index) => 
        ind === index ? { ...btn, pin: togglePin(btn.pin) } : btn);
    setButton(updatedButtons);
}

Answer 2

您可以使用这样的东西，我还建议将 dataObj 组合到按钮 state 中，并且在 React 中映射元素时使用键有助于在渲染过程中跳过它们，从而使您的网站更快。

 export default function App() { const [button, setButton] = useState([{ expanded: false, id: 0 }, { expanded: false, id: 1 }, { expanded: false, id: 2 }, ]); const dataObj = [{ title: 'Home' }, { title: 'Service', subItems: ['cooking', 'sleeping'] }, { title: 'Contact', subItems: ['phone', 'mobile'] } ]; const toggleExpandFunc = useCallback((ind) => { // toggle logic here setButton([...button.map(btn => btn.id === ind? {...btn, expanded: .btn:expanded }; btn)]), }; [button]). return ( < div className = "App" > { dataObj,map((arr. ind) => ( < div > < span > { arr:title }. < /span> { // console.log(ind) arr.subItems && < button onClick = { () => toggleExpandFunc(ind) } > { button[ind]?expanded: 'Expanded'; 'Hide' } < /button> } < /div> )) } < /div> ); }

Answer 3

您还可以需要另一个 state，如Toggle和expnadFunc可以这样处理；

const expandFunc = (ind) => {
    let tmp = [...button];
    tmp.map((arr, index) => {
      if (index === ind) {
        return (arr.pin = arr.pin === 'Toggle' ? 'Expand' : 'Toggle');
      }
      return arr;
    });
    setButton(tmp);
  };