使用 React 在点击时隐藏和显示内容
[英]Hiding and showing content on click using React
问题描述
In a nutshell, i am creating a case study for a potential job, the employer wants me to use a React app to create it...
简而言之，我正在为一份潜在工作创建案例研究，雇主希望我使用 React 应用程序来创建它......
I want to create a button that has the start function that:我想创建一个以 function 开头的按钮：
Hides original content
隐藏原始内容displays the hidden content,
显示隐藏的内容，
i got the hidden content to show but the original content is still visible, any help?我得到了要显示的隐藏内容，但原始内容仍然可见，有什么帮助吗？
my code below:我的代码如下：
import React, { useState } from 'react'
function Body() {
const [show, setShow] = useState(true);
const [hide, setHidden] = useState(true);
return (
<>
<div className='container'>
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={ () => setShow(s => ! s) } className='btn'>Start!</button>
</div>
{/* URL Link Input */}
<div>
{!show ? <form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form> : null }
</div>
</div>
</>
)
}
export default Body
4 个解决方案
解决方案1
1 2022-04-26 19:00:41
You are close, you need to have the original content in the ternary so it's hidden once you toggle show .您很接近，您需要在三元组中包含原始内容，以便在您切换show后将其隐藏。 I also changed setShow to set show to false rather than the previous value since it doesn't matter because the button is not toggable because once you click it and can't re toggle the original content.我还更改了setShow以将show设置为false而不是以前的值，因为这无关紧要，因为按钮不可切换，因为一旦单击它就无法重新切换原始内容。
import React, { useState } from 'react'
function Body() {
const [show, setShow] = useState(true);
return (
<div className='container'>
{show ? (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={() => setShow(false)} className='btn'>Start!</button>
</div>
) : (
<form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form>
)
</div>
)
}
export default Body
解决方案2
0 已采纳 2022-04-26 19:01:31
it dose not need hide state and you can toggle visibility just with show state. try this:它不需要隐藏 state，您可以通过显示 state 切换可见性。试试这个：
{ show ? <form action="GET">
<input type="text" />
<button className='btn'>Submit</button>
</form> : null
}
解决方案3
0 2022-04-26 19:01:54
You could use an appStarted state and then render your component conditionnally:您可以使用appStarted state 然后根据条件渲染您的组件：
const { useState } = React function Body() { const [appStarted, setAppStarted] = useState(false) return ( <div className="container"> {appStarted? ( <div> <h2>Hidden Content</h2> </div> ): ( <div className="start-container"> <h2>Click Start To View The Application</h2> <button onClick={ () => setAppStarted(true) } className='btn'>Start.</button> </div> )} </div> ) } ReactDOM,render(<Body />. document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="root"></div>
解决方案4
0 2022-04-26 19:06:32
This should work.这应该工作。
import React, { useState } from 'react';
function Body() {
const [show, setShow] = useState(false);
return (
<>
<div className="container">
{/* URL Link Input */}
<div>
{show ? (
<form action="GET">
<input type="text" />
<button className="btn">Submit</button>
</form>
) : (
<div className="start-container">
<h2>Click Start To View The Application</h2>
<button onClick={() => setShow(!show)} className="btn">
Start!
</button>
</div>
)}
</div>
</div>
</>
);
}
export default Body;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.