在 MERN 堆栈应用程序中呈现动态表单

Question

我正在尝试呈现一个动态表单 - 我希望默认设置 2 或 3 个，而不是 10 个输入字段，并且用户在单击添加图标时将呈现一个额外的输入字段。我的问题是，当我这样做时，我如何跟踪成分编号并在达到成分 10 时停止。注意：我没有将添加图标添加到我的代码库中，但我会将其添加为具有 onClick 功能的按钮图标

const [addCocktail, setAddCocktail] = useState({
    title: "",
    type_of_drink: "",
    glass: "",
    tags: "",
    ingredient1: "",
    ingredient2: "",
    ingredient3: "",
    ingredient4: "",
    ingredient5: "",
    ingredient6: "",
    ingredient7: "",
    ingredient8: "",
    ingredient9: "",
    ingredient10: "",
    preparation: "",
    selectedFiles: "",
  });

        <TextField
          name="ingredient1"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient1}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient1: e.target.value })
          }
        />
        <TextField
          name="ingredient2"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient2}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient2: e.target.value })
          }
        />
        <TextField
          name="ingredient3"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient3}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient3: e.target.value })
          }
        />
        <TextField
          name="ingredient4"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient4}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient4: e.target.value })
          }
        />
        <TextField
          name="ingredient5"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient5}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient5: e.target.value })
          }
        />
        <TextField
          name="ingredient6"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient6}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient6: e.target.value })
          }
        />
        <TextField
          name="ingredient7"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient7}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient7: e.target.value })
          }
        />
        <TextField
          name="ingredient8"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient8}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient8: e.target.value })
          }
        />
        <TextField
          name="ingredient9"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient9}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient9: e.target.value })
          }
        />
        <TextField
          name="ingredient10"
          variant="outlined"
          label="Ingredient"
          fullWidth
          value={addCocktail.ingredient10}
          onChange={(e) =>
            setAddCocktail({ ...addCocktail, ingredient10: e.target.value })
          }
        />

Answer 1

使用状态可以相对简单地动态生成字段。

我made a quick example 获得 3 个默认字段，并且可以通过按钮添加最多 10 个字段。请原谅缺少样式。

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Button, TextField } from "@material-ui/core";
import { Add } from "@material-ui/icons";

const maxInputFields = 10;
const defaultNumberOfFields = 3;

function App() {
  const [numberOfFields, setNumberOfFields] = useState(defaultNumberOfFields);

  function generateInputField(ingredientNum) {
    return (
      <div>
        <TextField variant="outlined" label={`Ingredient ${ingredientNum}`} />
      </div>
    );
  }

  function generateFields() {
    let listOfFields = [];
    for (let i = 1; i <= numberOfFields; i++) {
      listOfFields.push(generateInputField(i));
    }
    return listOfFields;
  }

  function handleButtonClick() {
    if (numberOfFields < maxInputFields) setNumberOfFields(numberOfFields + 1);
  }

  return (
    <div>
      {generateFields()}
      {numberOfFields < maxInputFields && (
        <Button
          variant="contained"
          color="primary"
          onClick={handleButtonClick}
        >
          <Add />
        </Button>
      )}
    </div>
  );
}