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

【问题标题】：Can I add dynamically new Html tag input in JSX by React我可以通过 React 在 JSX 中动态添加新的 Html 标记输入吗
【发布时间】：2017-12-18 07:55:20
【问题描述】：

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

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

添加帐户前的空白表格

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

【问题讨论】：

标签： javascript html reactjs react-jsx jsx

【解决方案1】：

不要认为单击按钮是添加 Html，而是更新状态，这反过来又由渲染函数反映。

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

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

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

如果我返回相同的页面并保存它

当您单击添加按钮时，您将需要触发更新状态（将新合约推送到数组）。大概您还想在这里触发将数据保存到数据库等？

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

【讨论】：

感谢您对使用redux的建议，如果在阅读更多内容后解决了问题，我会尝试使用它，在您建议的第二面，我已经使用数组来保存新的数据，效果很好。

【解决方案2】：

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

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

然后您可以将 AdditionalAccount 导入表单组件并在表单组件的状态下创建一个空数组。然后，您可以使用用户创建的许多 AdditionalAccount 组件来填充数组，并使用 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>
        )
      }
    })

【讨论】：