如何为材料ui<自定义输入>

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>
    );
  }

当我在输入栏中键入内容时，我希望控制台中显示消息"value changed！"。我该如何做到这一点？

Answer 1

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

试试下面的片段。我希望它能有所帮助。

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

在inutProps中放入onChange对我有效

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获取更多信息