web-dev-qa-db-ja.com

プログラムでRedux-Form Fieldの値を変更する

redux-form v7を使用すると、フィールド値を設定する方法がないことがわかります。 formには、2つのselectコンポーネントがあります。最初のselectコンポーネントの値が変更されると、2番目の値はクリアされます。

クラスのレンダリング：

<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 changeフックを追加し、他の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}
    />
  )
}
javascriptreactjsreduxredux-form
23
taven

this.handleSelectChange({ value, type: input.name })でonChangeロジックを使用し、redux-formから changeアクション を使用できます。

ドキュメントによると：

change（field：String、value：any）：Function

Reduxストアのフィールドの値を変更します。これはバインドされたアクションクリエーターなので、何も返しません。

コード：

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