如何在用户点击react.js中的按钮时动态添加输入字段

Question

我有两个问题 ->

第一个是我想在用户单击react.js中的“+”按钮时动态添加用户输入字段。如果用户点击次数越多，表单中就会添加更多的字段。如何在react.js中做到这一点？

第二个当用户更改其值时，我想将每个输入字段的相应值存储到我的组件状态变量中。现在我如何添加它们的值，我使用什么数据结构数组或对象或其他东西？如何 ？

Answer 1

function App() {
  const inputArr = [
    {
      type: "text",
      id: 1,
      value: ""
    }
  ];

  const [arr, setArr] = useState(inputArr);

  const addInput = () => {
    setArr(s => {
      return [
        ...s,
        {
          type: "text",
          value: ""
        }
      ];
    });
  };

  const handleChange = e => {
    e.preventDefault();

    const index = e.target.id;
    setArr(s => {
      const newArr = s.slice();
      newArr[index].value = e.target.value;

      return newArr;
    });
  };

  return (
    <div>
      <button onClick={addInput}>+</button>
      {arr.map((item, i) => {
        return (
          <input
            onChange={handleChange}
            value={item.value}
            id={i}
            type={item.type}
            size="40"
          />
        );
      })}
    </div>
  );
}

Answer 2

我会设置一个计数器，并通过每次单击按钮来增加它。我会将计数器数字映射到一个数组中，并循环创建新的输入元素。

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(0);

  const handleClick = () => {
    setCounter(counter + 1);
    console.log(counter);
  };
  return (
    <div className="App">
      <button onClick={handleClick}>Hello</button>

      {Array.from(Array(counter)).map((c, index) => {
        return <input key={c} type="text"></input>;
      })}
    </div>
  );
}

https://codesandbox.io/s/elastic-wave-36ous?fontsize=14&hidenavigation=1&theme=dark