javascript - reactjs - 想要创建一个“添加”按钮,为输入添加新行
问题描述
我想首先创建一个包含 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
,然后每次单击按钮时,它都会增加这个数字,但我不知道如何根据这个数字做出反应填充行数。
或者也许有更好的方法来做到这一点?
解决方案
没关系,我明白了。
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>
);
这行得通。但与 using 相比,它的效率不高map
吗?
推荐阅读
- java - 两台电脑之间的Socket连接
- wordpress - 无论如何在 WordPress 的 do_settings_fields 上使用 colspan
- xml - 我们可以比较两个 Spotfire 仪表板并在解压缩创建 XML 文件时将人类语言的差异作为 dxp 文件吗?
- java - Android:SQLite 无法在索引处绑定参数,因为索引超出范围
- css - Flexbox:等高行?
- qt - 如何使用来自外部 QML 文件的内部 QML 类型?
- python - 需要从宽转换为长
- go - 在 Golang 中使用反射覆盖结构值
- bash - Bash 脚本从存储在变量中的列表创建新文件夹
- android - 使用 Material Design 主题时如何自定义 TextInputLayout?