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

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

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

---

添加帐户前的空白表单

---

添加新帐户后，系统添加下表及其数据，并使用“新建”按钮进行编辑和保存，这与（+添加帐户）不同

---

不要将单击按钮视为添加Html，而是更新状态，而状态又会由渲染函数反映出来

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

如何在JSX中动态生成新的Html标记输入

这部分很简单，在渲染函数中，只需查看状态的联系人列表，并根据需要绘制联系人

如果我返回到同一页，请保存它

单击add按钮时，需要触发更新状态（将新契约推送到阵列）。您可能还想在这里触发数据保存到数据库等

---

您可能想考虑通过ReDux来保持应用程序状态，例如导航等。

< P>不要认为点击按钮添加HTML，而是更新状态，而状态又由渲染函数反映。

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

如何在JSX中动态生成新的Html标记输入

这部分很简单，在渲染函数中，只需查看状态的联系人列表，并根据需要绘制联系人

如果我返回到同一页，请保存它

单击add按钮时，需要触发更新状态（将新契约推送到阵列）。您可能还想在这里触发数据保存到数据库等

---

您可能想考虑通过使用ReDux来维护应用程序状态，等等。

< P>我同意Phil，ReDux可能是一个很好的想法，取决于项目的范围。

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

然后可以将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>
        )
      }
    })

import AddedAccount from./wherever'；
const AccountForm=React.createClass({
getInitialState（）{
返回{
加法计数=[]
}
},
addAccount（formData）{
这是我的国家({
addedAccounts:…this.state.addedAccounts，
formData
})
},
render（）{
让addedAccounts=this.state.addedAccounts.map（（account）=>
) 
返回(
…//使“添加帐户”按钮将表单数据传递给此。addAccount（）
{addedAccounts}
)
}
})

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

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

然后可以将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>
        )
      }
    })

import AddedAccount from./wherever'；
const AccountForm=React.createClass({
getInitialState（）{
返回{
加法计数=[]
}
},
addAccount（formData）{
这是我的国家({
addedAccounts:…this.state.addedAccounts，
formData
})
},
render（）{
让addedAccounts=this.state.addedAccounts.map（（account）=>
) 
返回(
…//使“添加帐户”按钮将表单数据传递给此。addAccount（）
{addedAccounts}
)
}
})

感谢您对使用redux的建议，在阅读更多相关内容后，如果它解决了问题，我会尝试使用它。在您建议的第二方，我已经使用了一个数组来保存新数据，而且效果非常好。感谢您对使用redux的建议，如果它在阅读更多相关内容后解决了问题，我会尝试使用它，在您建议的第二个方面，我已经使用了一个数组来保存新数据，它工作得非常好。