如何在点击事件后显示表单 反应

Question

我有一个 React 组件，它返回一个带有按钮的表单。当我单击该按钮时，我希望在同一页面上显示另一个不同的表单。我该怎么做？单击按钮时如何返回下一个表单？下面只是一个例子来给出主要思想

function Example() {
return (
<div>
<form>
<button onclick={showForm}></button>
</form>
</div>
)
}

Answer 1

定义一个状态来处理表单的可见性。

import React, { useState } from 'react';
function Example() {
const [showForm, setShowForm] = useState(false);
const showForm = () => {
setShowForm(!showForm);
}
return (
<div>
<form>
<button onClick={showForm}></button>
</form>
{showForm && (
<form>
...
</form>
)}
</div>
)
}

Answer 2

您可以使用三级运算符。 下面是一个示例，您可以使用该示例将一个组件更改为显示另一个组件。

最初将状态设置为 false，然后在单击按钮时将其更改为 true，这可以出现在您的应用程序中.js然后将其传递给呈现它的组件。

const [ editing, setEditing ] = useState(false)
const editRow = user => {
setEditing(true)
setCurrentUser({ id: user.id, name: user.name, username: user.username })
}

初始组件的按钮应该是这样的

<button onClick={() => setEditing(false)} className="button muted-button">
Cancel
</button>
<div/>

在您的主应用程序中.js这是您在两个组件之间切换的方式

<div>
{editing ? : (render what component you want when it is set to true ) : (render the component you want when it is set to false)}