我在这里使用creative-tim的materia工具包react模板:
而且他的customerInput组件没有onChange方法!有人知道如何使用此模板处理用户输入吗?
这是customerInput组件的用例:
<CustomInput
labelText="First Name..."
id="first"
formControlProps={{
fullWidth: true,
}}
inputProps={{
type: 'text',
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
),
}}
/>
这是它的组件代码
export default function CustomInput(props) {
const classes = useStyles();
const {
formControlProps,
labelText,
id,
labelProps,
inputProps,
error,
white,
inputRootCustomClasses,
success,
} = props;
const labelClasses = classNames({
[' ' + classes.labelRootError]: error,
[' ' + classes.labelRootSuccess]: success && !error,
});
const underlineClasses = classNames({
[classes.underlineError]: error,
[classes.underlineSuccess]: success && !error,
[classes.underline]: true,
[classes.whiteUnderline]: white,
});
const marginTop = classNames({
[inputRootCustomClasses]: inputRootCustomClasses !== undefined,
});
const inputClasses = classNames({
[classes.input]: true,
[classes.whiteInput]: white,
});
let formControlClasses;
if (formControlProps !== undefined) {
formControlClasses = classNames(
formControlProps.className,
classes.formControl,
);
} else {
formControlClasses = classes.formControl;
}
return (
<FormControl {...formControlProps} className={formControlClasses}>
{labelText !== undefined ? (
<InputLabel
className={classes.labelRoot + ' ' + labelClasses}
htmlFor={id}
{...labelProps}
>
{labelText}
</InputLabel>
) : null}
<Input
classes={{
input: inputClasses,
root: marginTop,
disabled: classes.disabled,
underline: underlineClasses,
}}
id={id}
{...inputProps}
/>
</FormControl>
);
}
CustomInput.propTypes = {
labelText: PropTypes.node,
labelProps: PropTypes.object,
id: PropTypes.string,
inputProps: PropTypes.object,
formControlProps: PropTypes.object,
inputRootCustomClasses: PropTypes.string,
error: PropTypes.bool,
success: PropTypes.bool,
white: PropTypes.bool,
};
我尚未测试过,但我认为您可以这样做:
<CustomInput inputProps={{ onChange: function(e) { console.log('Do stuff') }} />
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句