function sample () {
return (
<div>
<input/>
<input/>
<input/>
.
.
?
<button onClick={ ? ? ? ? }> ADD NEW INPUT <button>
</div>
)}
假設我們正在處理這段代碼。在這里，通過單擊“添加新輸入”按鈕標簽，我想輸入標簽以保持創建。
我一直在尋找 createElement() 和 appendChild()，但我所能做的只是將 1 個 HTML 元素附加到現有元素。
我想知道我們如何制作函式或設定邏輯來解決此類問題。
uj5u.com熱心網友回復：
您可以檢查以下實作
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 />;
};
這里是游樂場
uj5u.com熱心網友回復：
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>
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457650.html