React - 创建具有动态数量输入的表单

Question

我正在尝试创建一个表单供用户提交食谱。我需要将其设置为用户可以单击“+”按钮来添加更多成分或添加更多说明的位置。每个输入旁边还有一个“-”按钮可以将其删除。

我基本上可以正常工作，我可以添加项目。然而，删除这些项目似乎没有任何一致性。

我正在使用 Material UI，我不确定这是否相关。

以下是我正在处理的相关代码，我将在最后链接完整的代码和框。

const [ingredients, setIngredients] = React.useState(

  [

    {

      name: "",

      amount: ""

    }

  ]

);

这是我在反应中渲染数组的方式

        {ingredients.map((ing, idx) => {

          return (

            <div key={idx}>

              <TextField

                id={"ing-name-" + idx}

                name={"ing-name-" + idx}

                variant="outlined"

                label="Ingrediant Name"

                value={ing.name}

                required

                onChange={handleIngredientChange}

              />

              <TextField

                id={"ing-amt-" + idx}

                name={"ing-amt-" + idx}

                variant="outlined"

                label="Ingredient Amount"

                value={ing.amount}

                required

                onChange={handleIngredientChange}

              />

              <Button

                id={"ing-remove-" + idx}

                variant="contained"

                color="secondary"

                type="button"

                onClick={handleIngredientRemove}

              >-</Button>

            </div>

          )

        })}

        <Button

          variant="contained"

          color="primary"

          type="button"

          onClick={handleIngredientAdd}

        >+</Button>

最后是处理添加/删除项目的两个函数

  function handleIngredientRemove(event) {

    /*

    * To remove an element, we just use the array.filter function to genereate a new array without the 

    * element being deleted

    */

    console.log(event.target.id);

    let idx = parseInt(event.target.id.split("-")[2]);

    console.log("Removing ingredient " + idx);

    let newIngredients = ingredients.filter((ingredient, index) => idx !== index);

    setIngredients(newIngredients);

    

  }

完整的codesandbox演示https://codesandbox.io/s/happy-herschel-k0oqf

Answer 1

Material UI 用多个标签包裹你的按钮。所以当你点击一个按钮时，里面可能还有其他东西被点击。将 id 传递给 onClick 函数将解决您的问题，但每次单击按钮时它可能会创建一个新函数。onClick={() => handleIngredientRemove(idx)}我建议您使用currentTarget而不是 current。function handleInstructionRemove(event) {    // Use event.currentTarget instead of event.current    let idx = parseInt(event.currentTarget.id.split("-")[2]);    console.log("Removing instruction " + idx);    let newinstructions = instructions.filter(          (instruction, index) => idx !== index    );    setInstructions(newinstructions); }

Answer 2

我建议不要解析元素 id 来提取索引。你可以直接传递：onClick={()&nbsp;=>&nbsp;handleIngredientRemove(idx)}然后抓住它handleIngredientRemove就像handleIngredientRemove(idx)现在删除得很好！

Answer 3

一种简单的方法是将索引传递给删除处理程序并使用该索引进行过滤。（仅针对第一种形式进行了更改）&nbsp;这里是更新后的代码或者您可以在添加时使用时间戳作为 id 并使用该唯一时间戳 id 进行删除