如何用按钮动态添加输入字段？

javascript

2024-06-10 05:27:26

用按钮添加输入字段：一份全面指南

在创建表单时，有时需要根据用户的输入动态添加字段。这可以通过按钮单击来实现，使表单具有更大的灵活性。本文将深入探讨如何在按钮单击时添加字段，解决常见的疑难问题，并提供代码示例，指导您轻松实现这一功能。

问题陈述

想要在按钮单击时添加字段，但目前字段默认不显示，单击按钮后也不添加。

解决步骤

1. 初始化状态

使用React的 useState 钩子初始化 fields 状态，存储字段数组。

2. 处理按钮单击

创建 addField 函数，在按钮单击时触发。此函数生成一个唯一的 ID 并将其推送到 fields 数组中。

3. 处理字段更改

定义 handleFieldChange 函数，在字段值更改时更新 label 属性。

4. 处理类型更改

定义 handleTypeChange 函数，在字段类型更改时更新 type 属性。

5. 渲染表单

使用 map 函数渲染字段，包括标签、输入框和用于从表单中删除字段的按钮。

6. 处理添加按钮

添加一个 Add Field 按钮，调用 addField 函数。

代码示例

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);
    setFields([...fields, { label: "", type: "text", id: newFieldId }]);
  };

  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;