CODEWITHSUNDEEP
javascriptreact-nativematerial-ui
bobypoz
bobypoz

Reputation: 41

Empty Material-UI textfield after submitting the form

How can I clear value from the TextField after submitting the form? All of the components in the code are functional components, not the class ones. Here is one of the TextFields, the others are similar to this one. I can make the type='search' as in the code bellow but then a user needs to press a button to clear the value and even then the error check is complaining about the field being empty. Would it be better to try and refresh the component? This form is in a sidebar in my app.

<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
  />

Upvotes: 1

Views: 2344

Answers (1)

Maulik Sakhida
Maulik Sakhida

Reputation: 501

There is a value property that you have to pass to the TextField component. check example below:

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

Upvotes: 3

Related Questions