[英]Redux form in custom input of material ui not working
I am working in material ui and react where i have custom input. 我正在材料UI中工作,并在有自定义输入的地方做出反应。 I am using redux form for validation of a form. 我正在使用redux表单来验证表单。 Redux form is successful for @redux-form/INITIALIZE and @redux-form/REGISTER_FIELD however onBlur, onFocus event are not dispatching. @ uxux-form / INITIALIZE和@ redux-form / REGISTER_FIELD的 Redux表单成功,但是onBlur和onFocus事件未调度。 If i changed component of Field to something like <Field name="email" component="input" />
it will work but it is not working in React Material UI custom input. 如果我将Field的组件更改为<Field name="email" component="input" />
东西,它将可以工作,但在React Material UI自定义输入中不起作用。
CustomInput: 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);
Field supplies you an input
prop with all properties that you need to pass down to your input field. 字段为您提供input
道具,其中包含您需要传递到输入字段的所有属性。 Something like this: 像这样:
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.