如何在 JSX 中连续添加 HTML 元素? (反应)
How can I continuously append HTML element in JSX ? (React)
function sample () {
return (
<div>
<input/>
<input/>
<input/>
.
.
?
<button onClick={ ? ? ? ? }> ADD NEW INPUT <button>
</div>
)}
假设我们正在编写这段代码。在这里,通过单击 'ADD NEW INPUT' 按钮标记,我想输入标记以保持创建。
我一直在寻找 createElement() 和 appendChild(),但我所能做的只是将 1 个 HTML 元素附加到现有元素。
我想知道如何做一个函数或者建立一个逻辑来解决这类问题。
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>
);
您可以查看下面的实现
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 />;
};
function sample () {
return (
<div>
<input/>
<input/>
<input/>
.
.
?
<button onClick={ ? ? ? ? }> ADD NEW INPUT <button>
</div>
)}
假设我们正在编写这段代码。在这里,通过单击 'ADD NEW INPUT' 按钮标记,我想输入标记以保持创建。
我一直在寻找 createElement() 和 appendChild(),但我所能做的只是将 1 个 HTML 元素附加到现有元素。
我想知道如何做一个函数或者建立一个逻辑来解决这类问题。
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>
);
您可以查看下面的实现
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 />;
};