以编程方式更改 Redux-Form 字段值 [英] Programmatically change Redux-Form Field value

问题描述

当我使用 redux-form v7 时，我发现没有办法设置字段值.现在在我的 form 中，我有两个 select 组件.当第一个 select 组件值改变时，第二个的值将被清除.

课堂渲染:

<div className={style.lable}>站点:</div><div className={style.content}><字段名称=网站"选项={站点}可清除={假}组件={this.renderSelectField}验证={[必需]}/>

<div className={classNames(style.line, style.largeLine)}><div className={style.lable}>net:</div><div className={style.content}><字段名称=网络"选项={网}可清除={假}组件={this.renderSelectField}验证={[必需]}警告={warnings.net}/>

现在我添加了 select 更改挂钩，以及如何更改其他 select 值

renderSelectField = props =>{常量{输入，类型，元:{接触，错误}，...其他} = 道具const { onChange } = 输入const _onChange = 值 =>{onChange(值)this.handleSelectChange({ value, type: input.name })}返回 (<CH选择错误={触摸&&错误}{...输入}{...其他}onChange={_onChange}onBlur={null}/>)}

解决方案

您可以在 this.handleSelectChange({ value, type: input.name }) 中使用 onChange 逻辑并使用 change 来自 redux-form 的动作

根据文档:

<块引用>

change(field:String, value:any) : 函数

改变a的值Redux 商店中的字段.这是一个绑定动作创建者，所以它什么都不返回.

代码:

import { change } from redux-form";handleSelectChange = (value, type) =>{如果(类型 ===站点"){this.props.change('net', "newValue");}}const mapDispatchToProps = (dispatch) =>{返回 bindActionCreators({change}, dispatch);}

When I use redux-form v7, I find there is no way to set the field value. Now in my form, I have two select component. The second's value will be clear when the first select component value changed.

In class render:

<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>

Now I add the select change hook, and how can I change the other select value

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}
    />
  )
}

解决方案

You can have the onChange logic in this.handleSelectChange({ value, type: input.name }) and use change action from redux-form

According to the docs:

change(field:String, value:any) : Function

Changes the value of a field in the Redux store. This is a bound action creator, so it returns nothing.

Code:

import { change } from "redux-form";

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

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({change}, dispatch);
}

这篇关于以编程方式更改 Redux-Form 字段值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！