react函数组件中控制表单显示隐藏

可以使用 React 的状态来控制表单的显示和隐藏。例如，可以在函数组件内部定义一个状态变量，然后根据该变量的值来决定是否渲染表单。下面是一个示例代码：

import React, { useState } from "react";

function Form() {
  const [showForm, setShowForm] = useState(false);

  const toggleForm = () => {
    setShowForm(!showForm);
  };

  return (
    <div>
      <button onClick={toggleForm}>Toggle Form</button>
      {showForm && (
        <form>
          <label>
            Name:
            <input type="text" />
          </label>
          <br />
          <label>
            Email:
            <input type="email" />
          </label>
          <br />
          <button type="submit">Submit</button>
        </form>
      )}
    </div>
  );
}

在上述代码中，我们使用 `useState` 钩子来定义一个名为 `showForm` 的状态变量，并设置其初始值为 `false`。然后，在组件的返回值中，我们使用 `showForm` 变量来决定是否渲染表单。当用户点击 "Toggle Form" 按钮时，我们调用 `toggleForm` 方法来切换 `showForm` 变量的值，从而实现表单的显示和隐藏。