以编程方式更改 Redux-Form 字段值

IT技术 javascript reactjs redux redux-form
2021-04-18 06:41:42

当我使用redux-formv7 时,我发现没有办法设置字段值。现在在我的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}
    />
  )
}
1个回答

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

根据文档:

更改(字段:字符串,值:任意):函数

更改 Redux 存储中字段的值。这是一个绑定动作创建者,所以它什么都不返回。

代码:

import { change } from "redux-form";

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

const mapDispatchToProps = (dispatch) => {
  return bindActionCreators({change}, dispatch);
}
@Dane 类似于输入字段的工作方式,它需要字段名称作为第一个参数和您需要选择的选项值
2021-05-25 06:41:42
import { change } from "redux-form";
2021-05-25 06:41:42
是否有同时设置多个字段的 API?不在初始值期间
2021-05-28 06:41:42
这如何适用于组件component='select'变体<Field>
2021-06-01 06:41:42
如果change从 from导入redux-form,则参数为:change(form: string, field: string, value: any, touch?: boolean, persistentSubmitErrors?: boolean): FormAction
2021-06-03 06:41:42