reactjs - 想要创建一个“添加”按钮，为输入添加新行答案

【问题标题】：reactjs -- Want to create an "Add" button that adds a new row for inputsreactjs - 想要创建一个“添加”按钮，为输入添加新行
【发布时间】：2018-11-12 22:05:56
【问题描述】：

我想首先创建一个包含 3 行用户输入的页面。它看起来像

电子邮件角色组

[文本输入] [下拉列表] [下拉列表]

文本输入将是用户添加电子邮件的输入字段。下拉列表只是一个下拉块

我想创建一个可以添加另一行的按钮。到目前为止，每一行都在一个NewUser 组件中，看起来像

<div className='new-user'>
    <label className="email-input">
        <input type="text" name="email"/>
    </label>
    <Dropdown className='dropdown' options={roles} onChange={this._onSelect} value={defaultRoleOption} placeholder="Select a role"/>
    <Dropdown className='dropdown' options={groups} onChange={this._onSelect} value={defaultGroupOption} placeholder="Select a group"/>
</div>

roles & groups 是数组

我不知道最好的方法是什么。我可以创建一个rowNum，我可以将它存储在state 中，然后每次单击按钮时，它都会增加这个数字，但我不知道如何根据这个数字做出反应填充# of rows。

或者也许有更好的方法来做到这一点？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

没关系，我明白了。

let rowNum=3;
let newUserList = [];
for (let i=0; i<this.state.rowNum; i++) {
            newUserList.push(<NewUser roles={this.state.roles} datasets={this.state.datasets}/>);
        }
return (
      <div>
            {newUserList}
      </div>

    );

这行得通。但与使用 map 相比，它的效率不高吗？

【讨论】：