我在材料ui工作，并在我有自定义输入的地方做出反应 . 我使用redux表单来验证表单 . Redux表单对 @redux-form/INITIALIZE and @redux-form/REGISTER_FIELD 成功但是在onBlur上，onFocus事件没有调度 . 如果我将Field的组件更改为类似于 <Field name="email" component="input" /> 的组件，它将起作用，但它在React Material UI自定义输入中不起作用 .
CustomInput:
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);
Add User Form:
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);
1 回答
Field为您提供
inputprop，其中包含您需要传递到输入字段的所有属性 . 像这样的东西：