[英]Material UI - How to add onChange method to pre-made components?
I'm using creative-tim's materia kit react template here:我在这里使用 creative-tim 的 materia kit react 模板:
https://demos.creative-tim.com/material-kit-react/?_ga=2.145959732.1805770478.1593490128-1778058995.1593310826#/documentation/inputs https://demos.creative-tim.com/material-kit-react/?_ga=2.145959732.1805770478.1593490128-1778058995.1593310826#/documentation/inputs
and his customerInput components doesn't have an onChange method?而他的 customerInput 组件没有 onChange 方法? Anybody know how to handle user inputs using this template?
有人知道如何使用此模板处理用户输入吗?
Here is use case for a customerInput component:这是 customerInput 组件的用例:
<CustomInput
labelText="First Name..."
id="first"
formControlProps={{
fullWidth: true,
}}
inputProps={{
type: 'text',
endAdornment: (
<InputAdornment position="end">
<People className={classes.inputIconsColor} />
</InputAdornment>
),
}}
/>
and here is its component code这是它的组件代码
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,
};
I haven't tested it, but I think you can do it like this:我没有测试过,但我认为你可以这样做:
<CustomInput inputProps={{ onChange: function(e) { console.log('Do stuff') }} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.