我对React还是比较陌生的,我想单击按钮即可呈现输入表单。在button的onClick中调用的函数适用于console.log()之类的东西,但不呈现HTML元素。我绝对不知道为什么会这样。我正在使用功能组件。 下面是与该问题有关的代码段。
const UserAppointment = () => {
function renderHtml () {
return(
<div>
<h1>I want this to render on click</h1>
</div>
)
}
return (
<div>
<button onClick={renderHtml}>Render Input forms</button>
<br /><br /><br />
<button onClick={()=> { dispatch(logout()) }}>Logout</button>
</div>
)
}
export default UserAppointment ;
答案 0 :(得分:0)
我建议您使用state
保存和呈现html:
const UserAppointment = () => {
const [html, setHtml] = useState(null);
function renderHtml () {
return(
<div>
<h1>I want this to render on click</h1>
</div>
)
}
return (
<div>
{html}
<button onClick={(() => setHtml(renderHtml()))}>Render Input forms</button>
<br /><br /><br />
<button onClick={() => { dispatch(logout()) }}>Logout</button>
</div>
)
}
答案 1 :(得分:0)
具有布尔状态,而不是renderHtml
函数。单击时,切换布尔值,并在为true时有条件返回JSX:
const App = () => {
const [show, setShow] = React.useState(false);
return (
<div>
<button onClick={() => setShow(!show)}>Render Input forms</button>
<br /><br /><br />
<button onClick={()=> { dispatch(logout()) }}>Logout</button>
{
!show ? null : (
<div>
<h1>I want this to render on click</h1>
</div>
)
}
</div>
)
};
ReactDOM.render(<App />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class="react"></div>
答案 2 :(得分:0)
当您使用{em> onClick()之类的event handlers时,React不会从传入的函数中返回任何HTML。
就像其他评论者所说的那样,您需要使用React状态来管理div的显示时间和隐藏时间。
答案 3 :(得分:0)
由于您正在使用功能组件,因此请先设置状态。
const [Heading, setHeading] = useState("")
然后使用您的onClick事件并将函数传递给它。
<button onClick={renderHtml}>Render Input forms</button>
将状态设置为renderHtml函数中的标题。
const renderHtml =()=> {
setHeading("I want this to render on click")
}
在h1中显示标题。
<h1>{Heading}</h1>
完整代码:
const [Heading, setHeading] = useState("")
const renderHtml =()=> {
setHeading("I want this to render on click")
}
return (
<div>
<h1>{Heading}</h1>
<button onClick={renderHtml}>Render Input forms</button>
<br /><br /><br />
<button onClick={() => { dispatch(logout()) }}>Logout</button>
</div>
)
}