代码之家 › 专栏 › 技术社区 › JChao

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

reactjs javascript

JChao · 技术社区 · 7 年前

我想先创建一个包含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 ,然后每次我点击这个按钮,它都会增加这个数字,但我不知道如何根据这个数字生成#行。

或者有更好的方法?

1 回复 | 直到 7 年前

JChao 7 年前

没关系,我明白了。

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 ?

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前