我可以通过React在JSX中动态添加新的Html标记输入

Question

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

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

添加帐户前的空白表单

添加新帐户后，系统添加下面的表格，其数据具有编辑功能，并使用新按钮保存，不同于（+添加帐户）

Answer 1

不要将按钮视为添加Html，而是更新状态，而状态又由渲染功能反映。

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

  

如何在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>
        )
      }
    })