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

Question


function sample () {

return (

<div>

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

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

</div>

)}

假设我们正在编写这段代码。在这里，通过单击 'ADD NEW INPUT' 按钮标记，我想输入标记以保持创建。

我一直在寻找 createElement() 和 appendChild()，但我所能做的只是将 1 个 HTML 元素附加到现有元素。

我想知道如何做一个函数或者建立一个逻辑来解决这类问题。

Answer 1

  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>
  );

Answer 2

您可以查看下面的实现

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 />;
};

这里是the playground

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

How can I continuously append HTML element in JSX ? (React)

html

reactjs

appendchild

createelement

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

How can I continuously append HTML element in JSX ? (React)

html

reactjs

appendchild

createelement

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