单击两个按钮在 React 中打开一个组件

Question

我正在为我的学生做一个项目，想法是当单击按钮 1（红色）和按钮 2（蓝色）时，会出现紫色的组件。

[演示]https://codesandbox.io/s/blue-wave-cosuw?file=/src/App.js

两个按钮：btn1 和 btn2，当点击两个按钮时打开组件 test.js

Answer 1

试试这个

import Test from "./Test";
import React, {useState} from 'react'

export default function App() {
  const [showComponent, setComponent] = useState(false)
  const show = () =>{
    setComponent(true)
  }
  return (
    <div className="App">
      <h1>Click in two Buttons open a component Test.js</h1>
      <h2>Sample</h2>
      <div>
        <button onClick ={() => show()} id="btn1">btn1</button>
        <button onClick ={() => show()} id="btn2">btn2</button>
        {showComponent && 
          <Test/>
        }
      </div>
    </div>
  );
}

Answer 2

意图是好的，但我想知道是否有可能仅在单击两个按钮时打开组件，而不管顺序如何，在您的示例中，当我单击一个按钮时它已经打开组件。是不是要在这里开个条件？如果 btn1 为真 btn2 为假则不打开，但是如果 btn1 为真 btn2 为真打开组件，这有意义吗？

单击两个按钮在 React 中打开一个组件

Clicking two buttons to open a component in React

reactjs

react-functional-component