React中点击两个按钮触发指定组件显示的实现方案咨询

Hey there! Let's walk through how to build this feature in React— it's all about tracking button clicks and conditionally rendering your component once both buttons are triggered. Here's a step-by-step breakdown:

Step 1: Track button click states with useState #

First, we'll use React's useState hook to keep track of whether each button has been clicked. Initialize both states to false since neither button is clicked when the app loads.

import { useState } from 'react';
import Test from './test'; // Import your Test component

function App() {
  const [btn1Clicked, setBtn1Clicked] = useState(false);
  const [btn2Clicked, setBtn2Clicked] = useState(false);

  // We'll add click handlers and rendering logic next
}

Step 2: Add click handlers for your buttons #

Create functions to update the state when each button is clicked. These functions will flip the corresponding state to true when the button is pressed.

const handleBtn1Click = () => {
  setBtn1Clicked(true);
};

const handleBtn2Click = () => {
  setBtn2Clicked(true);
};

Then render your red and blue buttons with these handlers, and add basic styling to make them match your requirements:

<button 
  onClick={handleBtn1Click}
  style={{
    backgroundColor: 'red',
    color: 'white',
    padding: '8px 16px',
    margin: '0 8px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  }}
>
  btn1
</button>
<button 
  onClick={handleBtn2Click}
  style={{
    backgroundColor: 'blue',
    color: 'white',
    padding: '8px 16px',
    margin: '0 8px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  }}
>
  btn2
</button>

Step 3: Conditionally render the Test component #

We only want to show the purple-styled Test component after both buttons have been clicked. Use a logical AND (&&) check to render it only when both btn1Clicked and btn2Clicked are true:

{btn1Clicked && btn2Clicked && <Test />}

Step 4: Style the Test component with purple styling #

In your test.js file, add the purple styling— you can use inline styles, CSS modules, or a regular CSS class. Here's a simple inline style example:

// test.js
function Test() {
  return (
    <div style={{
      backgroundColor: 'purple',
      color: 'white',
      padding: '20px',
      marginTop: '20px',
      borderRadius: '4px'
    }}>
      This is your purple-styled Test component!
    </div>
  );
}

export default Test;

Bonus: Add a reset button (optional) #

If you want users to reset the state and hide the Test component again, add a reset handler and button:

const handleReset = () => {
  setBtn1Clicked(false);
  setBtn2Clicked(false);
};

// Render the reset button alongside the others
<button 
  onClick={handleReset}
  style={{
    padding: '8px 16px',
    marginLeft: '8px',
    border: '1px solid #ccc',
    borderRadius: '4px',
    cursor: 'pointer'
  }}
>
  Reset
</button>

Full App.js Example #

Putting it all together, your App.js will look like this:

import { useState } from 'react';
import Test from './test';

function App() {
  const [btn1Clicked, setBtn1Clicked] = useState(false);
  const [btn2Clicked, setBtn2Clicked] = useState(false);

  const handleBtn1Click = () => {
    setBtn1Clicked(true);
  };

  const handleBtn2Click = () => {
    setBtn2Clicked(true);
  };

  const handleReset = () => {
    setBtn1Clicked(false);
    setBtn2Clicked(false);
  };

  return (
    <div style={{ padding: '20px' }}>
      <button 
        onClick={handleBtn1Click}
        style={{
          backgroundColor: 'red',
          color: 'white',
          padding: '8px 16px',
          margin: '0 8px',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        btn1
      </button>
      <button 
        onClick={handleBtn2Click}
        style={{
          backgroundColor: 'blue',
          color: 'white',
          padding: '8px 16px',
          margin: '0 8px',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        btn2
      </button>
      <button 
        onClick={handleReset}
        style={{
          padding: '8px 16px',
          marginLeft: '8px',
          border: '1px solid #ccc',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Reset
      </button>

      {btn1Clicked && btn2Clicked && <Test />}
    </div>
  );
}

export default App;

This setup will exactly match your requirement: clicking both the red btn1 and blue btn2 will trigger the purple-styled Test component to appear.

内容的提问来源于stack exchange，提问作者André