如何在JSX中连续添加HTML元素?(反应)

Question

function sample () {
return (
<div>
<input/>
<input/>
<input/>
.
.
?
<button onClick={ ? ? ? ? }> ADD NEW INPUT <button>
</div>
)}

让我们假装我们正在处理这个代码。在这里，通过点击"添加新输入"按钮标签，我想输入标签以保持创建

我已经查找了createElement((和appendChild((，，但我所能做的只是在现有的HTML元素上只添加一个HTML元素

我想知道我们如何制作一个函数或设置一个逻辑来解决这类问题。

Answer 1

您可以检查以下实现

import React, { useState } from "react";
const Input = () => <input />; //input component
const Component = () => {
const [inputs, setInputs] = useState([]); //create a state to keep all generated inputs
return (
<div>
//re-render all inputs whenever we have a new input
{inputs.map((Input, index) => (
<Input key={index} />
))}
//set a new input into the input list
<button onClick={() => setInputs([...inputs, Input])}>Generate input</button>
</div>
);
};
export function App() {
return <Component />;
};

这是操场

Answer 2

const [input, setInput] = useState([<input defaultValue={1} />]);
return (
<div>
{input.map((item) => (
<div>{item}</div>
))}
<button
className="block p-5 mx-4 rounded-lg bg-emerald-600"
onClick={() => {
setInput([...input, <input defaultValue={input.length + 1} />]);
}}
>
Append
</button>
</div>
);