Reactjs 我们如何通过点击按钮生成另一个元素？

我们如何通过点击按钮生成另一个元素？在我的例子中，我想在单击按钮时添加另一个输入

import React from 'react';

function App() {
    return (
        <Form>
            <Form.Group controlId="formBasicEmail">
                <Form.Control type="email" placeholder="Enter email" />
            </Form.Group>
            <Button variant="primary">Add another input</Button>
        </Form>
    );
}

export default App;

从“React”导入React；
函数App（）{
返回(
添加另一个输入
);
}
导出默认应用程序；

从“React”导入React，{useState}；
函数App（）{
常量[activeInput，setActiveInput]=useState（false）
常量handleClick=（）=>{
setActiveInput（！activeInput）
}
返回(
{activeInput&&}
添加另一个输入
);
}
导出默认应用程序；

新控件是否属于任何特定的表单控件？或者它只是一个文本框？您可以使用组件的状态来跟踪要渲染的元素，并使用按钮单击处理程序来更新该状态。你试过什么吗？非常感谢。最后一个请求是否可以将其设置为非切换按钮，因为当我再次单击该按钮时，输入将消失。

setActiveInput（！activeInput）

更改为

setActiveInput（true）

import React, { useState} from 'react';

function App() {
    const [activeInput, setActiveInput] = useState(false)
    const handleClick = () => {
        setActiveInput(!activeInput)
    }
    return (
        <Form>
            <Form.Group controlId="formBasicEmail">
                <Form.Control type="email" placeholder="Enter email" />
            </Form.Group>
            { activeInput && <input type="text" placeholder="type something "/> }
            <Button variant="primary"
            onClick={handleClick}
            >Add another input</Button>
        </Form>
    );
}

export default App;