时间戳

首页 > 解决方案 > 使用事件来反应钩子的状态以针对特定的 div

javascript - 使用事件来反应钩子的状态以针对特定的 div

问题描述

我是编码和反应的新手，我正在尝试更新 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>
              }

标签： javascriptreactjseventsevent-handling

解决方案

维护activeIndex而不是仅仅活跃的布尔值。在 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>

推荐阅读