当我动态添加新输入字段时，单选按钮和 Select 字段重置 [Reactjs]

Question

I am trying to create a stack of input fields and I want to be able to add a new input field dynamically to the page. I am storing default fields in a state of array and when I want to add a new one I'm using setArr() to add a new one using spread operator. The problem is that the values of radiobutton and select fields are resetting every time I create a new field.

import React, { useState } from "react";

export default function StackState() {
  const [arr, setArr] = useState([
    <input type='text' />,
    <input type='radio' />,
    <select>
      <option disabled selected>
        Disabled
      </option>
      <option>One</option>
      <option>Two</option>
    </select>,
  ]);

  const handleAdd = () => {
    setArr((e) => [<input type='text' />, ...e]);
  };

  return (
    <div>
      <div>{arr.map((e) => e)}</div>
      <button onClick={handleAdd}>Add Me</button>
    </div>
  );
}

Answer 1

You should store the value of option tag's disabled attribute and selected value in a different states and also on radio button value in a separate state and use onChange eventlistener on them, so that once there initial state is change call a function onChange and store the required values in that state.

const [radioSelected,setRadioSelected] = useState(false);
const [optionDisabled,setOptionDisabled] = useState(true);
const [selectedOption,setSelectedOption] = useState("disabled");
const [arr, setArr] = useState([
<input type='text' />,
<input type='radio' checked={radioSelected} onChange={()=>setRadioSelected(!radioSelected)} />,
<select onChange={(e)=>setSelectedOption(e.target.value)}>
  <option disabled selected={selectedOption === "disabled" ? true : false} value="disabled">
    Disabled
  </option>
  <option selected={selectedOption === "one" ? true : false} value="one">One</option>
  <option selected={selectedOption === "two" ? true : false} value="two">Two</option>
</select>
]);