Wsrtjtyk

I'm using the React dashboard built by Creative Tim. My confusion is how do I define an onChange listener for a

The custom input class is defined as follows:

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

My usage of the CustomInput class is as follows:

    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>

    );

  }

When I type something into the input bar I want the message "value changed!" to appear in the console. How do I accomplish this?

You can use the input's onChange handler.

Try the snippet below. I hope it helps.

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