我在 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);
最佳答案
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>
);
}
}
关于javascript - Material ui 的自定义输入中的 Redux 表单不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48730372/