我可以通过React在JSX中动态添加新的HTML标签输入吗

Question

我在React中有一个系统，该系统基于添加多个帐户。 首次打开系统时，填写字段输入并单击（+添加帐户）按钮时，系统将具有空白输入和表格，系统将自动将您的数据行添加为与您填写的表格相同的形状，并且必须能够再次编辑并点击保存，

问题是如何通过React在JSX中动态生成新的Html标签输入，并在返回同一页面时将其保存。

---

添加帐户之前为空白表格

---

添加新帐户后，系统添加以下带有数据的表格，并具有使用新按钮进行编辑和保存的功能，与（+添加帐户）不同

Answer 1

不要以为单击按钮就是添加HTML，而是更新状态，而状态又由render函数反映出来。

在不知道代码结构的情况下很难过于具体，但是在应用程序状态的某个位置，您将需要存储联系人列表。 例如，这可能是处于最高级别组件状态的数组。

如何在JSX中动态生成新的HTML标签输入

这部分很容易，在您的渲染功能中，只需查看州的联系人列表并适当地绘制联系人即可。

并保存，如果我返回同一页面

单击添加按钮时，您将需要触发更新状态（将新合同推送到阵列）。 想必您还想在这里触发将数据保存到数据库等吗？

您可能需要考虑使用Redux通过导航等维护应用程序状态。

Answer 2

我同意Phil的观点，根据您的项目范围，使用Redux可能是个好主意。

听起来您想要做的是创建另一个React组件以用作添加/可编辑帐户（我称其为AddedAccount），该帐户接受添加帐户表单数据作为道具。

然后，您可以将AddedAccount导入到表单组件中，并在表单组件的状态下创建一个空数组。 然后，您可以使用用户创建的许多AddedAccount组件填充数组，并使用map方法呈现它们。

例：

import AddedAccount from './whereever';    
const AccountForm = React.createClass({
      getInitialState() {
        return {
          addedAccounts = [] 
        }
      },

      addAccount(formData) {
        this.setState({
          addedAccounts: ...this.state.addedAccounts,
            formData
        })
      },

      render() {
        let addedAccounts = this.state.addedAccounts.map((account) => 
          <AddedAccount accountInfo={account} />
        ) 
        return (
          <div>
            ... // Make the Add Account button pass form data to this.addAccount()
            {addedAccounts}
          </div>
        )
      }
    })