CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Dean Friedland
Dean Friedland

Reputation: 803

React: How to get values from Material-UI TextField components

I have a small app with a Form component, a SubmitButton component, and my parent (App.js) component. When the user clicks the submit button I want to get the values of the 3 fields on my form component and pass them to my App.js component. I am not sure how to trigger the event using onClick() or something like it to grab the form field values from my form and then pass them via props to the App.js component and console.log() them. Can anyone provide some guidance as I am very new to React?

App.js

import React from 'react';
import NavBar from './Components/NavBar'
import Form from './Components/InfoForm'
import SubmitButton from './Components/SubmitButton';
import Container from '@material-ui/core/Container';
import Checkbox from './Components/Checkbox';
import './App.css';

function App() {

  const [state, setState] = React.useState({
    checkbox: false,
});

const handleChange = event => {
  setState({ ...state, [event.target.name]: event.target.checked });
};

  return (
   <div>
     <Container maxWidth="md">
     <NavBar />             
     <Form />
     <Checkbox name="checkbox" onChange={handleChange} checked={state.checkbox} />
     <SubmitButton isEnabled={state.checkbox} onClick={} /> 
     </Container>     
   </div>
  );
}

export default App;

InfoForm.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import MenuItem from '@material-ui/core/MenuItem';
import TextField from '@material-ui/core/TextField';

function Form() {
  const classes = useStyles();
  const [values, setValues] = React.useState({
    name: '',
    email: '',
    months: ''
  });

  const handleChange = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

  return (

    <form className={classes.container} noValidate autoComplete="off">
      <TextField
        id="outlined-name"
        label="Name"
        className={classes.textField}
        value={values.name}
        onChange={handleChange('name')}
        margin="normal"
        variant="outlined"
      />

      <TextField
        id="outlined-email-input"
        label="Email"
        className={classes.textField}
        value={values.email}
        type="email"
        name="email"
        autoComplete="email"
        margin="normal"
        variant="outlined"
      />      

      <TextField
        id="outlined-select-months"
        select
        label="Select"
        className={classes.textField}
        value={values.months}
        onChange={handleChange('months')}
        SelectProps={{
          MenuProps: {
            className: classes.menu,
          },
        }}
        helperText="Month looking to book"
        margin="normal"
        variant="outlined"
      >
        {months.map(option => (
          <MenuItem key={option.value} value={option.value}>
            {option.label}
          </MenuItem>
        ))}
      </TextField>
    </form>
  );
}

export default Form;

SubmitButton.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';


export default function ContainedButtons(props) {

    return (
      <div>
        <Button variant="contained" color="primary" className={classes.button} disabled = {!props.isEnabled} type="submit">
          Submit
        </Button>
      </div>
    );
}

Upvotes: 3

Views: 16047

Answers (1)

Rene Mercado
Rene Mercado

Reputation: 36

If you don't want to move your components you can take the state handler out of infoForm.js

move this code to app.js and change the handler name to "handleChangeForm" (optional name)

  const [values, setValues] = React.useState({
    name: '',
    email: '',
    months: ''
  });

  const handleChangeForm = name => event => {
    setValues({ ...values, [name]: event.target.value });
  };

then you can use the handler and the values in infoForm as properties like this:

 <Form values={values} handleChangeForm={handleChangeForm}/>

also you need to send to your button component the values as properties

Inside form component you should destructure the props like this:

  const { values, handleChangeForm } = props;

  return (
    <form noValidate autoComplete="off"> .....

onChange event example inside form 

onChange={handleChangeForm("name")}

Finally you have the values connected to your buttom component and you can use a function like this

  const onClickBtn = () => {
    console.log(props.values);
  };

when button is clicked

  <Button
        variant="contained"
        color="primary"
        disabled={!props.isEnabled}
        type="submit"
        onClick={onClickBtn}
      >
        Submit
      </Button>

Upvotes: 2

Related Questions