我正在尝试重新使用添加表单来执行编辑操作,我无法初始化react-select字段,所有其他字段都已正确初始化。在表单组件中,我正在使用
初始化字段this.props.initialize(resp)
resp
内部的数据
{
"project": {
"id": 14,
"name": "jiijijijijijplplpl m m m",
"member_ids": [
{
"value": 6,
"label": "jose kj" //also tried "id":6, "name":"gjjgjgjg" and just haveing id only[6]
}
]
}
}
选择未初始化的字段
<Col sm={4}>
<span>Select Team members</span>
<Field
name="member_ids"
label=""
props={{
type: 'object'
}}
component={MultiSelectComponent}
{...{
data: this.props.employeeList,
isMulti: true
}}
fullWidth
/>
</Col>
员工名单的格式
[{“ id”:6,“ name”:“ gjjgjgjg”}]]
MultiSelectComponent
<Select
isMulti={this.props.isMulti}
name="colors"
options={this.props.data}
getOptionLabel={(option)=>option.name}
getOptionValue={(option)=>option.id}
onChange={this.handleChange}
className="basic-multi-select"
classNamePrefix="select"
/>
handleChange(event) {
if(this.props.isMulti && event !== null){
switch(this.props.input.name){
case 'project_ids':
//this.setState({project_ids:(event.map(opt => opt.id))})
this.props.dispatch(respectiveOpeFetch({"ope":{"id":(event.map(opt => opt.id))}}))
this.props.dispatch(change("AddInvoice","project_ids",(event.map(opt => opt.id))))
break;
case 'member_ids':
//this.setState({member_ids:(event.map(opt => opt.id))})
this.props.dispatch(change("AddProject","member_ids",(event.map(opt => opt.id))))
break;
default:
}}}
通过使用函数设置初始值解决了初始化问题
let menuItems = <Select
isMulti={this.props.isMulti}
isDisabled={this.props.isDisabled}
value={this.props.input.value?this.props.input.value:this.setInitialValues()}
name="colors"
options={this.props.data}
onBlur={() => { this.props.input.onBlur(this.props.input.value); }}
getOptionLabel={(option)=>option.name}
getOptionValue={(option)=>option.id}
onChange={this.handleChange}
className="basic-multi-select"
classNamePrefix="select"/>
在setinitialvalue函数内部,我使用redux-form getformValues获取了formvalues,并返回了其中的相应字段值。在此之后,它工作正常