在反应中渲染输入数组
[英] Render array of inputs in react
本文介绍了在反应中渲染输入数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一系列电子邮件(作为更大模型的一部分).这些显示在单独的行中，每个行都有一个删除按钮(地址本身可以直接在输入框中更新).不幸的是，当使用地图函数渲染输入时，我不知道如何在反应中做到这一点.(我正在将流星火焰项目转换为流星反应).
一切都会呈现，但我如何附加到更改事件以便我可以更新我的电子邮件数组?需要以某种方式设置 onChange + 值.
这是地图功能
return this.data.emailGroup.emails.map((email) => {返回 (<div key={email} className="input-group"><input type="text" className="form-control" onChange={self.handleEmailListChange} value={email}/><div className="input-group-btn"><按钮类型=按钮"className="btn btn-default remove-email"><spanclassName="glyphicon glyphicon-remove"></span></button>
);});
初始状态(用数据库中的数据填充:
getInitialState() {返回 {名称 : ''，描述: ''，电子邮件:[]，新电子邮件地址:''}},
根据请求，这里是渲染方法(它需要一个 getContent 方法.getcontent 方法在那里是因为在meteor 中我需要等待数据，所以同时我需要一个加载状态.
getContent() {返回 (<div className="box box-success"><div className="box-header with-border"><h3 className="box-title">电子邮件列表</h3>
<form role="form" className="form-horizontal"><div className="box-body"><p>下面是添加到此电子邮件组的电子邮件地址列表.如果你想添加更多您可以通过在下面的框中输入或添加列表来一一添加这同一个盒子(电子邮件地址必须用空格或 ;) 分隔，然后按添加添加至这列表.你可以编辑直接删除地址以及删除它们.</p><div className="输入组"><input type="text" className="form-control"值={this.state.newEmailAddress}onChange={this.handleAddNewEmail}placeholder="电子邮件地址以空格或分号分隔；即 test1@test.se;test2@test.se"/><span className="input-group-btn"><button type="button" onClick={this.handleAddNewEmailButton} className="btn btn-info btn-flat add-email">添加</button></span>
<br/>{this.renderEmail()}
</表单>
)},使成为(){var contentStyle = {最小高度:'946px'};返回 (<div className="content-wrapper" style={contentStyle}><section className="content-header"><h1>{this.data.emailGroup?this.data.emailGroup.name : '你好'}<小>创建者:Christian Klinton</small><br/><小>最后更新者:Christian Klinton - 2015-11-12 08:10:11</small><ol className="面包屑"><li><a href="/emailGroups"><i className="fa fa-dashboard"></i>主页</a></li><li><a href="/emailGroups">电子邮件群组</a></li>
{this.data.emailGroup?this.data.emailGroup.name : 'loading'}</ol></节><section className="内容"><div className="row"><div className="col-md-6"><div className="box box-primary"><div className="box-header with-border"><h3 className="box-title">信息</h3><表单角色=表单"><div className="box-body"><div className="form-group"><label htmlFor="inputName">名称</label><input type="email" className="form-control" id="name"onChange={this.handleNameChange}placeholder="设置邮件组名称" autoComplete="off"值={this.state.name}/>
<div className="form-group"><label>描述</label><textarea className="form-control" rows="3" id="description"placeholder="输入描述模板的用途和方式..."onChange={this.handleDesriptionChange}值={this.state.description}></textarea>
</表单>
<div className="col-md-6">{this.data.emailGroup?this.getContent() : <p>Loading</p>}
<div className="form-group"><div className="col-sm-offset-8 col-sm-4"><div className="pull-right"><button className="btn btn-primary">全部删除</button><button className="btn btn-primary save">保存</button>
</节>
)}
解决方案
React 要求你对渲染数组中的每个元素都有一些唯一的东西，它被称为 key，它是一个属性.
如果你不知道给键分配什么，只需给它分配数组的索引:
this.props.doors.map((door, index) => (<div key={index} className="door"></div>));
这是适用于您的问题的相同解决方案:
return this.data.emailGroup.emails.map((email, index) => {返回 (<div key={index} className="input-group"><输入类型="文本"className="表单控件"onChange={self.handleEmailListChange.bind(this, index)} value={email}/>);});
注意我如何绑定 handleEmailListChange 以接收修改后的电子邮件的索引.如果 handleEmailListChange 接受一个索引，它可以在 state 内更新修改后的电子邮件:
handleEmailListChange: function(index, event) {var emails = this.state.emails.slice();//首先复制电子邮件.电子邮件[索引] = event.target.value;//使用修改后的电子邮件更新它.this.setState({emails: emails});//更新状态.}
I have an array of emails (as a part of a bigger model). These are displayed in seperate rows witha remove button for each (the address itself can be updated in the input box directly). Unfortunately I dont know how to do this in react when the inputs are renderd using a map function.
(I am converting a meteor blaze project to meteor react).
Everything renders but how do I attach to change event so I can update my array of emails? onChange + value need to be set somehow.
This is the map function
return this.data.emailGroup.emails.map((email) => {
return (
<div key={email} className="input-group">
<input type="text" className="form-control" onChange={self.handleEmailListChange} value={email}/>
<div className="input-group-btn">
<button type="button"
className="btn btn-default remove-email"><span
className="glyphicon glyphicon-remove"></span></button>
</div>
</div>
);
});
The initial state(which is populated with data from the db:
getInitialState() {
return {
name : '',
description: '',
emails : [],
newEmailAddress : ''
}
},
Upon request here is the render method(it requires a getContent method.The getcontent method is there because in meteor I need to wait for data so in the meantime I need a loading state.
getContent() {
return (
<div className="box box-success">
<div className="box-header with-border">
<h3 className="box-title">List of emails</h3>
</div>
<form role="form" className="form-horizontal">
<div className="box-body">
<p>Below is a list of email addresses which are added to this email group. If
you
want
to add more
you can add them one by one by inputting in the box below or add a list into
the
same box (email
addresses have to be seperated by either a space or ;) then press Add to add
to
the
list. You can edit
the addresses directly as well as remove them.</p>
<div className="input-group">
<input type="text" className="form-control"
value={this.state.newEmailAddress}
onChange={this.handleAddNewEmail}
placeholder="Email addresses seperated by a space or a semicolon ; i.e. test1@test.se;test2@test.se"/>
<span className="input-group-btn">
<button type="button" onClick={this.handleAddNewEmailButton} className="btn btn-info btn-flat add-email">Add</button>
</span>
</div>
<br/>
{this.renderEmail()}
</div>
</form>
</div>
)
},
render()
{
var contentStyle = {
minHeight : '946px'
};
return (
<div className="content-wrapper" style={contentStyle}>
<section className="content-header">
<h1>
{this.data.emailGroup? this.data.emailGroup.name : 'hello'}
</h1>
<small> Created by: Christian Klinton</small>
<br/>
<small> Last updated by: Christian Klinton - 2015-11-12 08:10:11</small>
<ol className="breadcrumb">
<li><a href="/emailGroups"><i className="fa fa-dashboard"></i> Home</a></li>
<li><a href="/emailGroups">Email groups</a></li>
<li className="active">{this.data.emailGroup? this.data.emailGroup.name : 'loading'}</li>
</ol>
</section>
<section className="content">
<div className="row">
<div className="col-md-6">
<div className="box box-primary">
<div className="box-header with-border">
<h3 className="box-title">Information</h3>
</div>
<form role="form">
<div className="box-body">
<div className="form-group">
<label htmlFor="inputName">Name</label>
<input type="email" className="form-control" id="name"
onChange={this.handleNameChange}
placeholder="Set the name of the email group" autoComplete="off"
value={this.state.name}/>
</div>
<div className="form-group">
<label>Description</label>
<textarea className="form-control" rows="3" id="description"
placeholder="Enter a description what and how the template is used..."
onChange={this.handleDesriptionChange}
value={this.state.description}
></textarea>
</div>
</div>
</form>
</div>
</div>
<div className="col-md-6">
{this.data.emailGroup? this.getContent() : <p>Loading</p> }
</div>
<div className="form-group">
<div className="col-sm-offset-8 col-sm-4">
<div className="pull-right">
<button className="btn btn-primary">Delete all</button>
<button className="btn btn-primary save">Save</button>
</div>
</div>
</div>
</div>
</section>
</div>
)
}
解决方案
React requires you to have something unique for every element in the rendered array, it's called a key, and it's an attribute.
If you don't know what to assign to the key, just assign it the array's indexes:
this.props.doors.map((door, index) => (
<div key={index} className="door"></div>
));
Here's the same solution applied to your problem:
return this.data.emailGroup.emails.map((email, index) => {
return (
<div key={index} className="input-group">
<input type="text"
className="form-control"
onChange={self.handleEmailListChange.bind(this, index)} value={email}/>
</div>
);
});
Notice how I bound handleEmailListChange to receive the index of the modified email. If handleEmailListChange accepts an index, it can update the modified email within the state:
handleEmailListChange: function(index, event) {
var emails = this.state.emails.slice(); // Make a copy of the emails first.
emails[index] = event.target.value; // Update it with the modified email.
this.setState({emails: emails}); // Update the state.
}
这篇关于在反应中渲染输入数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
