如何在按钮单击时添加输入字段

Question

我正在尝试在按钮单击上添加字段，但默认情况下字段不显示并且不添加按钮单击

我已经尽力了，但我不知道问题是什么，我添加了函数并使用数学来生成唯一的 id console.log 工作正常，坚果字段没有显示

"use client";
import React, { useState } from "react";
import { Button } from "../ui/button";

const DynamicForm = () => {
  const [fields, setFields] = useState([]);

  const addField = (event) => {
    event.preventDefault();
    const newFieldId = Math.random().toString(36).substring(2, 15);
    fields.push(...fields, { label: "", type: "text", id: newFieldId });
    console.log(fields);
  };

  const handleFieldChange = (index, event) => {
    const updatedFields = [...fields];
    updatedFields[index].label = event.target.value;
    setFields(updatedFields);
  };

  const handleTypeChange = (index, event) => {
    const updatedFields = [...fields];
    updatedFields[index].type = event.target.value;
    setFields(updatedFields);
  };

  return (
    <>
      <form>
        <h2>Dynamic Form</h2>
        {fields.map((field, index) => (
          <div key={field.id}>
            <label htmlFor={field.id}>Label: </label>
            <input
              id={field.id}
              name={field.id}
              value={field.label}
              onChange={(e) => handleFieldChange(index, e)}
            />
            <select
              value={field.type}
              onChange={(e) => handleTypeChange(index, e)}
            >
              <option value="text">Text</option>
              <option value="email">Email</option>
            </select>
            <Button onClick={() => setFields(fields.slice(0, index))}>
              Remove
            </Button>
          </div>
        ))}
        <div className="gap-3">
          <Button onClick={addField}>Add Field</Button>
        </div>
      </form>
    </>
  );
};

export default DynamicForm;

Answer 1

UseState 钩子的使用似乎是错误的。

const addField = (event) => {
    event.preventDefault();
    const newFieldId = Math.random().toString(36).substring(2, 15);
    setFields([...fields,{ label: "", type: "text", id: newFieldId }])
    // fields.push(...fields, { label: "", type: "text", id: newFieldId });
    // logging Fields here will not work because setFields is async in nature.
    // console.log(fields);
  };

Answer 2

您的

addField

函数直接更改

fields

，而不是使用

setFields

函数。使用该函数告诉 React 状态已更改并且组件应该更新。您的函数应如下所示：

  const addField = (event) => {
    event.preventDefault();
    const newFieldId = Math.random().toString(36).substring(2, 15);
    // using setFields function instead of directly changing the fields.
    setFields(prevData => [...prevData, { label: "", type: "text", id: newFieldId }]); 
  };