当点击React上的按钮时，在同一屏幕上渲染表单，并将其保存在道具文件中

Question

我想用FaPlus图标制作一个按钮来呈现一个表单OnClick(或OnPress，我也看到过这是一个选项，但我不知道相比之下是否有什么不同(，但React说"añadirCurso"；(箭头函数(没有定义，有什么想法吗？(我使用了另一个类似问题的部分代码，但可能它不起作用，因为该代码位于扩展组件的类中(

这是代码

import React from "react";
import Button from 'react-bootstrap/Button';
import {aulas} from '../props/aulas';
import Container from 'react-bootstrap/Container';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {FaPlus} from 'react-icons/fa';
import { Route, useNavigate } from "react-router-dom";
export default function AdministrarCurso_Preceptor(){
const navigate= useNavigate();
const state= {añadirCurso: false};
añadirCurso= () =>{
return (
<div>
<form method="GET" action="#">
<legend>Añadir Curso</legend>
<label htmlFor="usuario">Nombre de Usuario</label> <br/>
<input required type="text" name="usuario" defaultValue="" /> <br/>
</form>
</div>
)
}
return(
<Container>
<AppBar style={{background: 'transparent', boxShadow: 'none'}}>
<Toolbar>
<Button className="btn btn-success" sx={{flexGrow: 1}}>
<FaPlus/>
</Button>
<Button onClick={()=> navigate('/LoginForm')}>Cerrar Sesión</Button>
</Toolbar>
</AppBar> 
<div className="row">
{/* Acá hay un map que muestra todo el contenido del prop aulas 
y le asigna un botón dentro de filas y columnas hechas 
mientras se toma el contenido del array */}
{aulas.map((aula, i)  => (
<div key={i} className="col-md-4" style={{paddingBottom: '10px', paddingTop: '5px'}}>
<Button className={(aula.estado==='sucio'? 'btn btn-danger': 'btn btn-success')}>{aula.año}{aula.division}</Button>
</div>
))}
</div>
</Container>
)
}

对于"；把它保存在道具上"；部分，正如我在上一个问题中所说的，我有一个包含教室(aulas(的道具文件，我希望表单数据在提交时保存在该文件中，这样当你点击提交按钮时，它会将数据保存在那里，因为它在该文件中，它应该呈现一个新按钮，这可能吗？

Answer 1

代码不起作用的原因有几个。

1. 首先，正如您所提到的，代码属于一个类组件，看起来您只是将其粘贴到了功能组件中。

2. 您需要在箭头函数的名称之前使用const。

3. 与其返回JSX，我强烈(非常强烈(建议您使用这样的状态

   const[isFormVisible，setIsFormVisible]=useState(false(；

然后单击按钮，您只需将状态设置为true。并使用该变量进行这样的条件渲染。。。。

{isFormVisible && (<theJSXGoesHere />)}