使用redux- formv7时,我发现无法设置字段值。现在,在我中form,我有两个select部分。当第一个select组件值更改时,第二个值将清除。
redux- form
form
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} /> ) }
您可以使用onChange逻辑this.handleSelectChange({ value, type: input.name })并使用changeredux-form中的操作
this.handleSelectChange({ value, type: input.name })
change
根据文档:
change(field:String,value:any):函数 更改Redux存储中字段的值。这是绑定动作的创建者,因此不返回任何内容。
change(field:String,value:any):函数
更改Redux存储中字段的值。这是绑定动作的创建者,因此不返回任何内容。
码:
handleSelectChange = (value, type) => { if(type === "site") { this.props.change('net', "newValue"); } } const mapDispatchToProps = (dispatch) => { return bindActionCreators({change}, dispatch); }