programing

Redux-Form 필드 값을 프로그래밍 방식으로 변경합니다.

batch 2023. 3. 12. 10:37
반응형

Redux-Form 필드 값을 프로그래밍 방식으로 변경합니다.

사용할 때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}
    />
  )
}

onChange 로직은 에서 사용할 수 있습니다.this.handleSelectChange({ value, type: input.name })redux 형식의 액션을 사용합니다.

문서에 따르면:

변경(필드:문자열, 값: any): 함수

Redux 저장소의 필드 값을 변경합니다.바인딩된 작업 생성자이므로 아무것도 반환하지 않습니다.

코드:

import { change } from "redux-form";

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

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

언급URL : https://stackoverflow.com/questions/45230531/programmatically-change-redux-form-field-value

반응형