使用 React Hooks 隐藏点击按钮

Question

I currently have a button that when clicked on shows another component, however I want this specific button to also be hidden when it's clicked on. Any idea? Thanks.

const [showSecondFields, setShowSecondFields] = React.useState(false);
const onClick = () => setShowSecondFields(true);

const SecondFields = () => (
<div>
<p>Second Component</p>
</div>
);

<button type="button" className="button--secondary" onClick={onClick}>
 Show Component
</button>
{showSecondFields ? <SecondFields /> : null}

Answer 1

If the components are siblings, you can use a ternary to switch between them:

 const SecondFields = () => ( <div> <p>Second Component</p> </div> ); const Demo = () => { const [showSecondFields, setShowSecondFields] = React.useState(false); const onClick = () => setShowSecondFields(true); return showSecondFields? <SecondFields />: ( <button type="button" className="button--secondary" onClick={onClick}> Show Component </button> ); } ReactDOM.render( <Demo />, root )

 <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="root"></div>

Answer 2

You can put both in one ternary condition

This way you can return one component if the condition is true and another component if the condition is false

Do it this way

{!showSecondFields ?   //if condition true
   <button type="button" className="button--secondary" onClick={onClick}>
       Show Component
   </button>
       :  <SecondFields />  //if condition false
}

Answer 3

You could simply do something along the lines of this:

{!showSecondFields && <button className="button--secondary" onClick={onClick}>
 Show Component
</button>}

{showSecondFields && <SecondFields /> }

The first ternary operator shows the button if the condition is false, the second operator shows the fields if the condition is true.