Material UI-如何将onChange方法添加到预制组件?

Jpark9061

我在这里使用creative-tim的materia工具包react模板:

https://demos.creative-tim.com/material-kit-react/?_ga=2.145959732.1805770478.1593490128-1778058995.1593310826#/documentation/inputs

而且他的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,
};
布鲁诺·里巴里奇(BrunoRibarić)

我尚未测试过,但我认为您可以这样做:

<CustomInput inputProps={{ onChange: function(e) { console.log('Do stuff') }} />

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Typescript / React:如何将ref添加到material-ui Box组件?

来自分类Dev

如何使用React Material UI的过渡组件来动画化将项目添加到列表?

来自分类Dev

如何将后缀图标添加到material-ui-pickers输入字段

来自分类Dev

如何将数据属性添加到Material-UI按钮?

来自分类Dev

如何将样式对象添加到数组中的每个图标?(React / Material-ui)

来自分类Dev

无法将项目添加到Material-UI表单

来自分类Dev

如何将自定义svg图标添加到Material UI字体图标?

来自分类Dev

如何使用Material UI TextField将className添加到子元素

来自分类Dev

如何正确地将 material-ui 添加到项目中?

来自分类Dev

导入Material-UI组件

来自分类Dev

Material UI中缺少组件

来自分类Dev

在Material-UI中将徽章添加到mobileMenu

来自分类Dev

Material-UI如何响应

来自分类Dev

如何使用Material UI的阴影?

来自分类Dev

没有路径将图像添加到Material-UI卡

来自分类Dev

如何通过映射Material-UI网格组件添加JSON

来自分类Dev

如何将Material UI集成到Svelte项目中

来自分类Dev

如何将Radio组与Material UI中的TextField对齐?

来自分类Dev

在Material UI中从TableRow组件获取数据

来自分类Dev

Material-UI +酶:浅渲染组件?

来自分类Dev

使用Material-UI网格定位组件

来自分类Dev

如何将Semantic-UI添加到Phoenix

来自分类Dev

如何将事件添加到Kendo UI Scheduler?

来自分类Dev

如何将事件添加到Kendo UI Scheduler?

来自分类Dev

如何减少Material Toolbar的Material-UI高度?

来自分类Dev

material-ui实验室@ material-ui / lab /和material-ui核心之间的组件差异

来自分类Dev

Material-ui:如何制作水平清单

来自分类Dev

如何在Material UI中使TextField无效

来自分类Dev

如何更改Material-UI的Toggle的颜色

Related 相关文章

  1. 1

    Typescript / React:如何将ref添加到material-ui Box组件?

  2. 2

    如何使用React Material UI的过渡组件来动画化将项目添加到列表?

  3. 3

    如何将后缀图标添加到material-ui-pickers输入字段

  4. 4

    如何将数据属性添加到Material-UI按钮?

  5. 5

    如何将样式对象添加到数组中的每个图标?(React / Material-ui)

  6. 6

    无法将项目添加到Material-UI表单

  7. 7

    如何将自定义svg图标添加到Material UI字体图标?

  8. 8

    如何使用Material UI TextField将className添加到子元素

  9. 9

    如何正确地将 material-ui 添加到项目中?

  10. 10

    导入Material-UI组件

  11. 11

    Material UI中缺少组件

  12. 12

    在Material-UI中将徽章添加到mobileMenu

  13. 13

    Material-UI如何响应

  14. 14

    如何使用Material UI的阴影?

  15. 15

    没有路径将图像添加到Material-UI卡

  16. 16

    如何通过映射Material-UI网格组件添加JSON

  17. 17

    如何将Material UI集成到Svelte项目中

  18. 18

    如何将Radio组与Material UI中的TextField对齐?

  19. 19

    在Material UI中从TableRow组件获取数据

  20. 20

    Material-UI +酶:浅渲染组件?

  21. 21

    使用Material-UI网格定位组件

  22. 22

    如何将Semantic-UI添加到Phoenix

  23. 23

    如何将事件添加到Kendo UI Scheduler?

  24. 24

    如何将事件添加到Kendo UI Scheduler?

  25. 25

    如何减少Material Toolbar的Material-UI高度?

  26. 26

    material-ui实验室@ material-ui / lab /和material-ui核心之间的组件差异

  27. 27

    Material-ui:如何制作水平清单

  28. 28

    如何在Material UI中使TextField无效

  29. 29

    如何更改Material-UI的Toggle的颜色

热门标签

归档