Material-UI TextField context dirty

7
votes

I'm trying to better understand how to check for dirtyness using material-ui's FormControl or TextField component. The documentation for TextField demo page states:

TextField is composed of smaller components (FormControl, InputLabel, Input, and FormHelperText) that you can leverage directly to significantly customize your form inputs.

... and on the TextField API docs it states:

The properties of the <FormControl /> component are also available.

... and later in the FormControl API docs it states:

Provides context such as dirty/focused/error/required for form inputs. Relying on the context provides high flexibilty and ensures that the state always stay consitent across the children of the FormControl. This context is used by the following components:

FormLabel FormHelperText Input InputLabel

But I don't see any documentation state exactly HOW to check for dirty using the TextField / FormControl.

Can anyone clarify? This is StackOverflow, so here is some code for the TextField I'm using:

<TextField
  id='email'
  label='Email'
  value={this.state.email}
  onChange={this.handleChange('email')}
  margin="normal"
  required
  fullWidth>
</TextField>
2
javascriptreactjsmaterial-ui

2 Answers

0
votes

You can use Formik material-ui

Formik Material UI

-1
votes

Dirty checking for TextField component has to be implemented manually.

handleChange = (id) => (event) => { this.setState({isEmailDrity: true}); };