如何使用反应钩子useState正确处理动态表单答案

【问题标题】：How to properly handle dynamic forms using react hooks useState如何使用反应钩子useState正确处理动态表单
【发布时间】：2020-06-24 06:32:15
【问题描述】：

如何正确管理此particular UI 表单的状态，用户可以在其中添加输入字段（添加输入按钮）和添加输入部分（添加部分按钮）。

我认为这将是我的初始状态，我可以将每个数组对象映射为输入部分，并将每个参数数组映射为输入的数量。

const [values, setValue] = useState([
  {
    params: ['1 input']
  },
  {
    params: ['2 input','2 input']
  }
])

我无法理解如何向 params 数组添加值，如何传递我的初始状态？

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

这样的事情应该可以工作：

import React, { useState } from "react";

export default function App() {
  const [values, setValue] = useState([
    {
      params: ["1 input"]
    },
    {
      params: ["2 input", "2 input"]
    }
  ]);

  const createInputHelper = index => {
    const stateCopy = values;
    stateCopy[index].params.concat(`{index + 1} input`);
    setValue(stateCopy);
  };

  return (
    <div className="App">
      <div style={{ display: "flex", flexDirection: "column", width: "100px" }}>
        {values.map((value, firstIndex) => {
          return value.params.map((param, index) => {
            return (
              <input
                value={param}
                onClick={() => createInputHelper(firstIndex)}
              />
            );
          });
        })}
      </div>
    </div>
  );
}

【讨论】：

【解决方案2】：

基本上，您正在更新某些事件的值，例如单击按钮时所以你需要捕捉那个事件，当它触发时，你更新你的数据，然后使用setValues()

function handleOnClick(input){
  const updatedValues = [...values];
  updatedValues[0].params.push(input)
  setValue(updatedValues);
}

【讨论】：