Question

我当前正在使用redux-form和materialUI构建一个Select，并且它总是返回invalid。所以我有点茫然。

我希望将道具传递给Select，使其具有当前Select的正确状态，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)
);

所以这里发生的是我正在通过props参数传递值，因为我在使用redux时没有其他方法可以将值向下传递。

选择字段-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
};

Answer 1

这对我有用：

import React from 'react';

export const renderDropDownField = (formValues) => {

    const { input, label, meta, options } = formValues;

    const { touched, error } = meta;

    const formcss = touched ? `form-control is-${error && touched ? 'invalid' : 'valid'}`: 'form-control';

    return (
        <div className="form-group">
            <label htmlFor={input.name}>{label}</label>
            <select {...input} className={formcss} id="exampleFormControlSelect2">
                {
                    options.map((option) => <option value={option.value}>{option.name}</option>)
                }
            </select>
            {(touched && error) ? <div className="help-block text-danger">{error}</div> : ''}
        </div>
    );
}

import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";
import { renderDropDownField } from "../FormBuilder";

class MyForm extends Component {
    
   onFormSubmit = (formValues) => {
        console.log(formValues)
    }

    render() {
        const { handleSubmit } = this.props;
        const categories = [
            {
                value: 'none',
                name: 'Select Category'
            },
            {
                value: 'miss',
                name: 'Miscellaneous'
            },
        ];
        return (
            <div>
                <form onSubmit={handleSubmit(this.onFormSubmit)} className="needs-validation px-5">
                    <Field name="categorie" options={categories} component={renderDropDownField} />
                    <button type="submit" className='btn btn-primary'>Save Changes</button>
                </form>
            </div>
        )
    }
}

const validate = (formValues) => {
    const errors = {};
    if (!formValues.categorie || 'none' === formValues.categorie) {
        errors.categorie = "Please select a valid categorie.";
    }
    return errors;
}


export default reduxForm({
    form: 'blogEditForm',
    validate
})(MyForm);

Redux表单选择“无效”状态始终为true

1 个答案: