Redux Form Выберите «неверное» состояние всегда true - PullRequest
Новая
       7

Redux Form Выберите «неверное» состояние всегда true

0 голосов
/ 25 сентября 2018

В настоящее время я создаю Select с избыточной формой и materialUI, и он всегда возвращает invalid.Так что я немного в растерянности.

Я бы хотел, чтобы реквизиты были переданы в «Выбрать», чтобы корректно отображалось текущее состояние «Выбор», «IE недействителен», «Нетронутый» и т. Д.

Использование 

  <Field
    onUpdate={this.changeAge.bind(this)}
    name={`title`}
    props={{ value: this.props.registration.Title }}
    component={SelectField}
    label={`Title*`}
    validate={[requiredField]}
    options={[{ value: 'mr', text: 'Mr' }, { value: 'mrs', text: 'Mrs' }]}
  />


function mapStateToProps(state) {
  return {
    registration: state.registration
  };
}

function mapDispatchToProps(dispatch) {
  return {
    updateKYCItem: bindActionCreators(updateKYCItem, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(
  reduxForm({
    form: 'RegistrationIntroduction',
    onSubmit,
    onSubmitSuccess
  })(RegistrationIntro)
);

enter image description here

Итак, здесь происходит передача значения через аргумент props как IНе знаю другого способа передать значение, так как я использую приставку.

Поле выбора - Select.js 

export default props => {
  console.info(props.meta, props.input);
  let theme = props.meta.valid && props.meta.touched ? textFeild.validTheme : textFeild.defaultTheme;
  const hasError = props.meta.invalid && props.meta.touched && props.value === '';
  return (
    <MuiThemeProvider theme={theme}>
      <FormControl error={hasError}>
        <InputLabel htmlFor="age-simple">{props.label}</InputLabel>
        <Select
          onChange={event =>
            props.onUpdate({
              value: event.target.value,
              field: props.input.name
            })
          }
          value={props.value ? props.value : ''}
          inputProps={{ ...props }}
        >
          {props.options.map(option => (
            <MenuItem selected={props.value === option.value} value={option.value}>
              {option.text}
            </MenuItem>
          ))}
        </Select>
        {hasError &&
          <FormHelperText>{props.meta.error}</FormHelperText>
        }
      </FormControl>
    </MuiThemeProvider>
  );
};

Select.propTypes = {
  id: PropTypes.string,
  name: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired
};
...