无法以redux形式初始化react-select

问题描述 投票:0回答:1

我正在尝试重新使用添加表单来执行编辑操作,我无法初始化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:
  }}}
reactjs redux-form react-select
1个回答
0
投票

通过使用函数设置初始值解决了初始化问题

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,并返回了其中的相应字段值。在此之后,它工作正常

© www.soinside.com 2019 - 2024. All rights reserved.