以編程方式更改Redux窗體字段值

Question

當我使用redux-form v7時，我發現無法設置字段值。現在在我的form我有兩個select組件，當第一個select組件值發生變化時，第二個值將會清除。

類

渲染：

<div className={classNames(style.line, style.largeLine)}> 
     <div className={style.lable}>site:</div> 
     <div className={style.content}> 
      <Field 
      name="site" 
      options={sites} 
      clearable={false} 
      component={this.renderSelectField} 
      validate={[required]} 
      /> 
     </div> 
    </div> 

    <div className={classNames(style.line, style.largeLine)}> 
     <div className={style.lable}>net:</div> 
     <div className={style.content}> 
      <Field 
      name="net" 
      options={nets} 
      clearable={false} 
      component={this.renderSelectField} 
      validate={[required]} 
      warning={warnings.net} 
      /> 
     </div> 
    </div> 

現在我加入select變化掛鉤，我怎麼可以改變其他select值

renderSelectField = props => { 
     const { 
      input, 
      type, 
      meta: { touched, error }, 
      ...others 
     } = props 
     const { onChange } = input 
     const _onChange = value => { 
      onChange(value) 
      this.handleSelectChange({ value, type: input.name }) 
     } 
     return (
      <CHSelect 
      error={touched && error} 
      {...input} 
      {...others} 
      onChange={_onChange} 
      onBlur={null} 
      /> 
     ) 
    } 

Answer 1

你可以有的onChange邏輯this.handleSelectChange({ value, type: input.name })和使用change action from redux-form

根據文檔：

變化（字段：字符串，值：任何）：功能

更改一個 字段的Redux的存儲的值。這是一個綁定的動作創建者，因此它不會返回任何內容。

代碼：

handleSelectChange = (value, type) => { 
    if(type === "site") { 
      this.props.change('net', "newValue"); 
    } 
} 
const mapDispatchToProps = (dispatch) => { 
    return bindActionCreators({change}, dispatch); 
}