如何为 material-ui <CustomInput...> 定义更改监听器？

Question

我正在使用由 Creative Tim 构建的 React 仪表板。我的困惑是如何为

定义 onChange 侦听器

自定义输入类定义如下：

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
// @material-ui/core components
import withStyles from "@material-ui/core/styles/withStyles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
// @material-ui/icons
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
// core components
import customInputStyle from "assets/jss/material-dashboard-react/components/customInputStyle.jsx";

function CustomInput({ ...props }) {
  const {
    classes,
    formControlProps,
    labelText,
    id,
    labelProps,
    inputProps,
    error,
    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
  });
  const marginTop = classNames({
    [classes.marginTop]: labelText === undefined
  });
  return (
    <FormControl
      {...formControlProps}
      className={formControlProps.className + " " + classes.formControl}
    >
      {labelText !== undefined ? (
        <InputLabel
          className={classes.labelRoot + labelClasses}
          htmlFor={id}
          {...labelProps}
        >
          {labelText}
        </InputLabel>
      ) : null}
      <Input
        classes={{
          root: marginTop,
          disabled: classes.disabled,
          underline: underlineClasses
        }}
        id={id}
        {...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,
  error: PropTypes.bool,
  success: PropTypes.bool
};

export default withStyles(customInputStyle)(CustomInput);

我对CustomInput类的使用如下：

    renderInput(key) {
    return (
      <GridItem xs={20} sm={20} md={12}>
        <CustomInput
          labelText={key}
          id={key}
          inputRef={() => console.log("value changed!")}
          formControlProps={{
            fullWidth: true
          }}
          inputProps={{
            disabled: false
          }}
        />
      </GridItem>
    );
  }

当我在输入栏中输入内容时，我想要消息“值已更改！”出现在控制台中。我该如何做到这一点？

Answer 1

您可以使用输入的onChange 处理程序。

试试下面的 sn-p。希望对你有帮助。

const Input = () => 
  <input onChange={e => console.log(e.target.value)}/>

ReactDOM.render( <Input /> , document.getElementById('root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

https://reactjs.org/docs/forms.html

Answer 2

将 onChange 放入 inutProps 对我有用

const handleChange = (event) => {
    console.log("Inside handlChange, event=" + event);
}
                    <CustomInput
                      labelText="* Email..."
                      id="email"
                      formControlProps={{
                        fullWidth: true,
                      }}
                      inputProps={{
                        onChange: (e) => handleChange(e),
                        type: "email",
                        endAdornment: (
                          <InputAdornment position="end">
                            <Email className={classes.inputIconsColor} />
                          </InputAdornment>
                        ),
                      }}
                    />

更多信息请参考https://github.com/creativetimofficial/material-kit-react/issues/6