Reactjs 在react select中处理多个select行
我正在使用生成react中的选择选项,您将在提供的屏幕截图中看到。这个概念很简单,我有一个按钮来添加一个新行,它有一个选择选项来输入客户端,另一个输入来插入日期。单击加号按钮后,它将添加一个新行,以填充精确的信息,如我所解释的。请看截图。 当每一行的数据发生更改时,我在填充状态时遇到问题,因此数组中的每个对象都代表一行,以下是我的状态Reactjs 在react select中处理多个select行,reactjs,react-select,Reactjs,React Select,我正在使用生成react中的选择选项,您将在提供的屏幕截图中看到。这个概念很简单,我有一个按钮来添加一个新行,它有一个选择选项来输入客户端,另一个输入来插入日期。单击加号按钮后,它将添加一个新行,以填充精确的信息,如我所解释的。请看截图。 当每一行的数据发生更改时,我在填充状态时遇到问题,因此数组中的每个对象都代表一行,以下是我的状态 this.state = { customClients: [ { date: null, clients: [{ v
this.state = {
customClients: [
{
date: null,
clients: [{ value: "", label: "" }]
}
]
}
这是我的render方法的一个片段
{this.state.customClients.map((client, i) => {
let cli_id = `cli-${i}`;
let date_id = `date-${i}`;
return (
<div className="row" key={i} id={i}>
<div className="col-md-4">
<p className="mb-1 mt-3 font-weight-bold text-muted">Clients</p>
<Select
name="clients"
inputId={cli_id}
isMulti
value={client.clients}
onChange={this.handleCustomClients}
options={clients || []}
className="basic-multi-select"
classNamePrefix="select"
/>
</div>
<div className="col-md-8">
<div className="form-group">
<p className="mb-1 mt-3 font-weight-bold text-muted">Date</p>
<DatePicker
name="date"
id={date_id}
className="form-control"
selected={client.date}
onChange={this.handleCustomClients}
minDate={new Date()}
/>
</div>
</div>
</div>
);
})}
{this.state.customClients.map((client,i)=>{
让cli_id=`cli-${i}`;
让date_id=`date-${i}`;
返回(
客户端
日期
);
})}
由于要更改数组中的对象,因此需要传递要编辑的记录的索引。首先,让我们更新onChange
事件并传递索引
<Select
name="clients"
inputId={cli_id}
isMulti
value={client.clients}
onChange={e => this.handleCustomClients(e, i)}
options={clients || []}
className="basic-multi-select"
classNamePrefix="select"
/>
代码沙箱
干杯 您到底面临什么问题?HandleCustomClient中有什么?
handleCustomClients(e, i) {
this.setState(prevState => {
return (prevState.customClients[i].clients = e);
});
}