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

Toggle visibility (individually duplicating) one thousand sentences while maintaining optimal browser and host performance

Error encountered while attempting to import external JSON data into SurveyJS

Incorporating CASL with the latest version of Angular, version

Steps for displaying a pop-up window and showcasing a JSF Response

The browser displays the jQuery ajax response instead of passing it to the designated callback function

What is the best way to update the state by either adding to it or replacing it if the key

Implementing Material-UI radio buttons for a true/false data grid

Execute a function with parameters when a button is clicked dynamically using PHP

Ajax sends the URL location to Python

Deriving usefulness from TextInput by sending it to a function

Is there a way to transform authorid into postid in order to retrieve author information and store it in my authorDocument array?

How can you handle undefined values in the query object parameter when using Mongoose's Find function?

Perform activities within a component responsible for displaying a flatlist

Is there a way to convey a transition MUI property from a parent component to its child component in React?

Using async/await in combination with Vuex and Feathers

I'm encountering an issue with my API Key being undefined, despite having it saved in both an .env file and as a global variable

Troubleshooting Angular MIME problems with Microsoft Edge

Ways to ensure that the $http.post api call waits for the response to be fully prepared

Attempting to deploy my initial Google Cloud Function, encountering an error message indicating that Express is not detected

Can an HTML DIV be resized along with its contents?