React jsx-单击添加新输入字段的按钮后，输入字段值将被删除

Question

我正在使用反应钩子。 该组件以一个输入字段开头。我试图在单击按钮“添加”时动态添加输入。单击按钮“添加”将导致组件中有2个输入字段。第二次单击将在三个输入字段中显示……等等。

我已经实现了。但是，如果在先前的输入字段中键入了一些值之后单击按钮，则这些值将消失并且输入字段再次变为空白。即使单击“添加”按钮后，如何保持在先前输入字段中输入的内容？

所有输入都存储在名为“ inputArray”的数组中，然后呈现输入数组。

注意：一个输入字段是指一个包含多个输入字段的容器。您单击添加，添加第二个容器，依此类推。如果您感到困惑，请检查一下屏幕。

定义

  let [inputArray, setInputArray] = useState(new Array());
  let index = 0;

输入容器的BLUEPRINT代码

  const additionalIngredient = (i) =>
  <>
        <div>
          <TextField name={'ing'+i} id="filled-basic" label="المكون" variant="filled" type="text" inputRef={register} />
          <TextField name={'qnt'+i} id="filled-basic" label="المقدار" variant="filled" type="number" inputRef={register}/>
        </div>
        <div>
        <InputLabel>المقياس</InputLabel>

          <Select name={'msr'+i} className={style.select} native inputRef={register} >
            <option value='gr'>جرامات</option>
            <option value='tbsp'>معلقة طعام</option>
            <option value='tsp'>معلقة شاي</option>
            <option value='ml'>مليجرام</option>
            <option value='pc'>حبة</option>
          </Select>
        </div>
        <Button className={style.addBtn} variant="contained" color="secondary" onClick={() => setInputArray(inputArray => [...inputArray, additionalIngredient(++index)])} >اضف +</Button>
  </>;

提供第一个输入容器：

  useEffect(()=>{
    setInputArray(inputArray => [...inputArray, additionalIngredient(index)]);
  }, []);

在“返回”中

          {
            inputArray.map((e,i)=>{
              return <div ref={register} className={s1} key={i+(Math.random()*18)}>{e}</div>
            })
          }

屏幕截图：

1. 开始

2. 单击“添加”（红色按钮）后，输入字段的新容器

3. 使用值...

4. 只需再次单击添加按钮，所有输入都将被清除