Javascript 材料界面-如何向预制组件添加onChange方法？

我在这里使用creative tim的Material kit 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（道具）{
const classes=useStyles（）；
常数{
formControlProps，
labelText，
身份证件
标签道具，
输入道具，
错误，
白色
InputRootCustomClass，
成功,，
}=道具；
const labelClasses=类名({
[''+classes.labelRootError]：错误，
[''+classes.labelRootSuccess]：成功&&！错误，
});
const underlineClasses=类名({
[classes.underlineError]：错误，
[classes.underlineSuccess]：成功&&！错误，
[classes.underline]：正确，
[课堂.白色下划线]：白色，
});
const marginTop=类名({
[inputRootCustomClasses]：inputRootCustomClasses！==未定义，
});
常量inputClasses=类名({
[classes.input]：true，
[classes.whiteInput]：白色，
});
让FormControlClass；
如果（formControlProps！==未定义）{
formControlClasses=类名(
formControlProps.className，
类。窗体控件，
);
}否则{
formControlClasses=classes.formControl；
}
返回(
{labelText！==未定义(
{labelText}
)：null}
);
}
CustomInput.propTypes={
labelText:PropTypes.node，
labelProps:PropTypes.object，
id:PropTypes.string，
inputProps:PropTypes.object，
formControlProps:PropTypes.object，
inputRootCustomClasses:PropTypes.string，
错误：PropTypes.bool，
成功：PropTypes.bool，
怀特：PropTypes.bool，
};

我还没有测试过，但我认为您可以这样做：