React hook 的 state 使用事件来定位特定的 div

Question

我是编码和反应的新手，我正在尝试更新 x4 div，所以当用户点击它时，它会更新里面的内容。 目前我更新了代码，但是它更新了所有 4 个 div，而不是单击的特定 div。

我知道这将通过使用事件来控制，但是有点困惑我到底需要包含什么。

任何正确方向的帮助将不胜感激。 当前代码运行良好，但所有 4 个 div 中的内容都会更新，而不是单击的特定内容

  const [isActive, setIsActive] = useState(false)

  const toggleContent = e => {
    e.preventDefault()
    setIsActive(!isActive)
  }

示例 div 我试图在用户点击时更新（目前我有 x4 个其他的，它们的逻辑相同，但 HTML 内容不同。目前，当点击 4 个按钮中的任何一个时，所有 x4 div 内容都会更改，但我只希望它更改包含被点击按钮的特定 div

              {!isActive ?
                <article>
                    <h1>BEFORE CLICK TEXT</h1>
                      <a onClick={toggleClass}>BUTTON</a>
                </article>
                :
                <article>
                      <p>AFTER CLICK TEXT</p>
                      <a onClick={toggleClass}>Back</a>
                </article>
              }

Answer 1

保持activeIndex而不是仅活动 boolean。 在 render 方法中，根据 activeIndex 和 index 决定 div 的活动属性。

试试这个片段。

 const content = ['abc', 'def', 'ghi', 'jkl']; const Component = () => { const [activeIndex, setActiveIndex] = React.useState(-1); return ( <div> {content.map((item, index) => <div key={item} style={{color: activeIndex === index? "red": "black" }} onClick={() => setActiveIndex(index)}> {item} </div>)} </div> ) } ReactDOM.render(<Component />, document.getElementById('app'));

 <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="app"> </div>