Clear the Material-UI textfield upon form submission

Question

Clear the Material-UI textfield upon form submission

After submitting the form, how can I clear the value from the TextField? All of the components in my code are functional components, not class ones. The example below shows one of the TextFields, with others similar to it. Currently, setting type='search' requires the user to press a button to clear the value, leading to error check complaints about an empty field. In this sidebar form of my app, would it be better to attempt to refresh the component instead?

<form onSubmit={onSubmitHandler} className={classes.root}>
  <TextField
    name='firstName'
    inputRef={register({
      required: "Please enter first name",
      validate: value => isEmpty(value)
    })}
    label={translate('invitation.first_name')}
    error={!!errors.firstName}
    type='search'
    autoFocus
    fullWidth
  />

javascript react-native material-ui

Answer 1

Answer №1

To utilize the TextField component, ensure you provide a value property as demonstrated below:

class MyComponent extends Component {
  state = {value: ''}
  
  resetValue = () => {
    this.setState({value: ''});
  }
  
  render() {
    return (
      <div>
        <TextField
          ...
          value={this.state.value}
        />
        <button onClick={this.resetValue}>Reset</button>
      </div>
    )
  }
}

Answer 2

To utilize the TextField component, ensure you provide a value property as demonstrated below:

class MyComponent extends Component {
  state = {value: ''}
  
  resetValue = () => {
    this.setState({value: ''});
  }
  
  render() {
    return (
      <div>
        <TextField
          ...
          value={this.state.value}
        />
        <button onClick={this.resetValue}>Reset</button>
      </div>
    )
  }
}

Clear the Material-UI textfield upon form submission

Answer №1

Similar questions

Struggling with TypeScript errors due to React.HTMLProps for HTMLAnchorElement

Can I use MuiThemeProvider in my component without any restrictions?

Angular app - static List mysteriously clears out upon refresh

Ways to modify the appearance of the button within ion-calendar

Should a Service Worker be automatically installed on each page reload, or only when a user navigates to a new page?

working with assigning values to rvalues in JavaScript

Ways to retrieve the identifiers of every child node UL element within a UL container

Exploring the properties of individual Vue components on a single page with v-for loop

How can I customize the clock's background color in material-ui pickers?

Looking to locate or track duplicate values within a multi-dimensional array?

Switch Bootstrap Tab

What is the best way to test an externally hosted application with Testacular and AngularJS?

How to retrieve the initial element of a specific tag using jQuery

The MUI persistent drawer navigation bar becomes dysfunctional when accessing a specific route

Angular (TypeScript) time format in the AM and PM style

Looking to find a way to identify strings with hyphens in JavaScript?

Working with both Javascript and jQuery code within a single HTML file

The jQuery .accordion() feature is not functioning properly due to the failure to load jQuery into the HTML document

Identifying the absence of a character at the end of the last line in Node.js to detect

Issue with making Flickr API request using XMLHttpRequest receiving an unsuccessful response