如何在 React 中打开一个组件的更多视图并关闭其他组件的 onClick？

Question

我正在使用带有三元的 React 功能组件来切换显示更多功能。我还喜欢以下逻辑：如果其中一个切换为真（显示更多），则其他为假（不显示）。现在，它们只是堆叠在一起，除非您专门单击每个按钮以再次“关闭”。

这是他们的初始状态：

const [showFirst, setShowFirst] = useState(false)
const [showSecond, setShowSecond] = useState(false)

这是渲染中的登录以显示 'show mores' 之一：

  <button
     className="btn-show"
     onClick={() => setShowFirst(!showFirst)}>
     <p className="proj-name">86 List</p>
  </button>

以下是它在适当位置的显示方式：

{showFirst ? (
            <div className="hide-me">
              <p className="proj-lang">Built with: React.js, Ruby on Rails, Postgresql, CSS</p>
              <p className="proj-desc">86List is a community for service-industry professionals to talk about the clients that they serve. Built with Ruby on Rails and React.js, 86List requires login authentication and registration in order to view and interact with co-workers' posts. In future iterations, I want to allow users to create their own accounts and request to be a part of a community with a community leader's approval.</p>
              <img className="proj-img" src="/assets/86list.png" alt="" />
              <div className="proj-link-container">
                <a className="proj-link" href="https://github.com/aawferris/86list" target="_blank" rel="noreferrer" alt="this repo's github">REPO</a>
                <a className="proj-link" href="https://86list.netlify.app/" target="_blank" rel="noreferrer" alt="live site for this link">SITE</a>
            </div>
            </div>
          ) : (
              <div></div>
          )}

我曾尝试制作一个 handleClick，它将每个切换回 false 而当前的切换为 true，但它没有用。这是一个例子：

const handleFirst = () => {
   setShowFirst(!showFirst)
   setShowSecond(showSecond)
}

Thanks in advance!

Andy

Answer 1

我们的想法是拥有一个对象数组，其中您具有如下属性 showMore: true/false 以及某种像 id: 1 这样的 id。每次单击其中一个按钮时，您将遍历数组（这应该是父组件中的一个状态），您将该单击按钮的 showMore 属性设置为 true 并设置所有其他false。然后你只需将该数组设置为你的新状态。

如何在 React 中打开一个组件的更多视图并关闭其他组件的 onClick？

How do I toggle on a view more for one component and toggle off the others onClick in React?

javascript

show

toggle

reactjs