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

如何解决在 MERN 堆栈应用程序中呈现动态表单

我正在尝试呈现一个动态表单 - 而不是有 10 个输入字段，我希望有 2 或 3 个作为默认值，并且用户在单击添加图标时将呈现一个额外的输入字段。我的问题是，当我这样做时，我如何跟踪成分编号并在达到成分 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 })
          }
        />

解决方法

动态生成字段可以通过状态相对简单地完成。

我 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>
  );
}