如何在 JSX 中连续追加 HTML 元素？ （反应）

Question

function sample () {

return (

<div>

<input/>
<input/>
<input/>
.
.
?

<button onClick={ ? ? ? ? }> ADD NEW INPUT <button>

</div>

)}

假设我们正在编写这段代码。在这里，通过单击“添加新输入”按钮标签，我想输入标签以继续创建。

我寻找了 createElement() 和appendChild()，但我所能做的只是将 1 个 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, index) => (
        <div key={`input-${index}`}>{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>
  );