单击按钮即可动态创建一组jsx控件

Question

我正在反应页面上。如果我点击删除按钮，我想要 从页面中删除三个输入（学校名称，学校地址，年份） 如果我单击添加更多按钮三个输入（学校名称，学校地址，年份） 应该作为一个组添加。用户最多可以输入3条记录 该页面上可以存在3组（学校名称，学校地址，年份）。

这是我的密码和框

$ANSWER = do {

  this_command   # Note: No output suppression
  if ($?) { "this_command"; break }

  that_command   # Note: No output suppression
  if ($?) { "that_command"; break }

  "neither command"

} while ($false)

这里是我遵循此操作的链接。

    https://codesandbox.io/s/interesting-sanderson-fuz8o

问题：当我单击添加更多按钮时，该如何做？ 三个输入框是重复的/动态创建的，当我单击“删除”时 按钮，将删除与该行相关的3个输入框。

Answer 1

您的应用程序应该由管理记录的创建和删除的组件以及管理内部状态（输入字段的内容）的组件组成。

您可能要从记录中排除“创建”按钮，因为该操作与特定记录无关。

要删除记录，您需要将功能作为道具传递给每个记录组件，并在单击按钮时在记录容器内部调用该函数。