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 而不仅仅是 active 布尔值。在render方法中，根据activeIndex和index决定div的active属性。

试试这个片段。

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>

使用事件来响应钩子的状态以定位特定的 div

1 个答案: