创建和元素，克隆一段代码按下按钮 Jsx 反应

Question

如果有好心人能帮我解决这个问题，我会很高兴。我只想添加一个按钮，一旦我们点击它就会有一个新的：<h3>G1</h3> <Multiselect options={options} displayValue="student" /></div> 将被创建，在此先感谢。这是我的代码：

import {Multiselect} from 'multiselect-react-dropdown';

 function addGroup(){
     var x = document.getElementById("mySelect");
   var Multiselect = document.createElement("Multiselect");
   Multiselect.appendChild = <Multiselect/>;
   x.add(Multiselect);
  }
function Dropdown(){
    const data = [
      {student: '1' , id: 1},
      {student: '2' , id: 2},
      {student: '3' , id: 3}
    ]
  const [options] = useState(data);
return (
    <row>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-primary" onClick={addGroup()}>Add Group</button> 
       <div id="mySelect"> <h3>G1</h3>
        <Multiselect options={options} displayValue="student" /></div>
        
        
       
    </div>
    </row>
    
);
}
export default Dropdown;

Answer 1

使用状态来跟踪下拉列表的计数。
将您的状态更新程序连接到按钮 onClick
当用户按下按钮时增加 dropdownCount。

import React from 'react';

export default function App() {
  const [dropdownCount, setDropdownCount] = React.useState(0);

  return (
    <div>
      {Array.from({ length: dropdownCount }).map((v, idx) => {
        return ( 
          <div>
            <p>Dropdown {idx + 1}</p>
            <MultiDropdown />
          </div>
        )
      })}
      <button onClick={() => setDropdownCount(dropdownCount + 1)}>
          Increase dropdown
      </button>
    </div>
  );
}

注意：- React 中的直接 DOM 操作是 anti-pattern。尽量远离它。

创建和元素，克隆一段代码按下按钮 Jsx 反应

Create and Element , clone a piece of code pressing a button Jsx react

javascript

clone

onclick

reactjs