javascript - Material ui 的自定义输入中的 Redux 表单不起作用

Question

我在 Material UI 中工作，并在我有自定义输入的地方使用react。我正在使用 redux 表单来验证表单。 Redux 表单对于 @redux-form/INITIALIZE 和 @redux-form/REGISTER_FIELD 是成功的，但是 onBlur、onFocus 事件没有调度。如果我将 Field 的组件更改为类似 <Field name="email" component="input" /> 的内容它可以工作，但在 React Material UI 自定义输入中不起作用。

自定义输入:

class CustomInput extends React.Component {
  render() {
      const { classes, formControlProps, label, id, labelProps,inputRef, inputProps, error, success,meta} = this.props;
      return (
        <FormControl {...formControlProps} className={classes.formControl}>
            {label !== undefined ? (<InputLabel
                classes={{
                    root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),
                }}
                htmlFor={id}
                {...labelProps}
            >
                {label}
            </InputLabel>):null}
            <Input
                classes={{
                    root: (label !== undefined ? "":classes.marginTop),
                    disabled: classes.disabled,
                    underline: classes.underline,
                    inkbar: (error ? classes.inkbarError:success ? classes.inkbarSuccess:classes.inkbar),
                }}
                id={id}
                inputRef={inputRef}
                {...inputProps}
            />
            {error ? <Clear className={classes.feedback + " " + classes.labelRootError}/>:success ? <Check className={classes.feedback + " " + classes.labelRootSuccess}/>:null}
        </FormControl>
    );
  }
}

CustomInput.propTypes = {
    classes: PropTypes.object.isRequired,
    labelText: PropTypes.node,
    labelProps: PropTypes.object,
    id: PropTypes.string,
    inputProps: PropTypes.object,
    formControlProps: PropTypes.object,
    meta:PropTypes.object,
    error: PropTypes.bool,
    success: PropTypes.bool
}

export default withStyles(customInputStyle)(CustomInput);

添加用户表单:

const required = value => (value == null ? 'Required' : undefined)
class AddUser extends React.Component {

    handleSubmit(event){
        event.preventDefault();
        console.log("Hello")
    }

    render(){
        return (
            <div>
                <form onSubmit={this.handleSubmit.bind(this)}>
                 <Field
                    name="email"
                    component={CustomInput}
                    label="Email"  validate={required} formControlProps=
                    {{fullWidth:true}}  
                  />
               </form>
          </div>)
       }
   }

export default reduxForm({
    form: 'add-user-form',
    initialValues: {
        email: ''
    },
})(AddUser);

Answer 1

Field 为您提供一个 input Prop ，其中包含您需要传递给输入字段的所有属性。像这样:

class CustomInput extends React.Component {
  render() {
      const { input, classes, formControlProps, label, id, labelProps,inputRef, inputProps, error, success,meta} = this.props;
      return (
        <FormControl {...formControlProps} className={classes.formControl}>
            {label !== undefined ? (<InputLabel
                classes={{
                    root: classes.labelRoot + (error ? " " + classes.labelRootError:success ? " " + classes.labelRootSuccess:""),
                }}
                htmlFor={id}
                {...labelProps}
            >
                {label}
            </InputLabel>):null}
            <Input
                classes={{
                    root: (label !== undefined ? "":classes.marginTop),
                    disabled: classes.disabled,
                    underline: classes.underline,
                    inkbar: (error ? classes.inkbarError:success ? classes.inkbarSuccess:classes.inkbar),
                }}
                id={id}
                inputProps={{...input}}
                inputRef={inputRef}
                {...inputProps}
            />
            {error ? <Clear className={classes.feedback + " " + classes.labelRootError}/>:success ? <Check className={classes.feedback + " " + classes.labelRootSuccess}/>:null}
        </FormControl>
    );
  }
}