Reset form input values in React

Question

I want create a function using with i can reset value in form inputs without submit. I tried create that function in App Component (resetFormFields) and pass it on props to Form Component. It's preety simply when I want to do this onSubmit (e.target.reset()) but I got stuck when I have to do it without submit, on a different element than the form. Can I do that without adding these values to state?

App:

class App extends Component {

state = {
    people: [],
    formMessages: [],
    person: null
};

handleFormSubmit = e => {

    e.preventDefault();

    const form = e.target;
    const name = form.elements["name"].value;
    const username = form.elements["username"].value;

    this.addPerson(name, email);
    form.reset();
};

resetFormFields = () => {
    return;
}

render() {

    return (
        <div className="App">
            <Form formSubmit={this.handleFormSubmit} 
                  reset={this.resetFormFields} />
        </div>
    );
}

Form:

    const Form = props => (
  <form className={classes.Form}
    id="form"
    onSubmit={props.formSubmit}>

    <input autoFocus
        id="name"
        type="text"
        defaultValue=""
        placeholder="Name..."
    />
    <input
        id="email"
        type="text"
        defaultValue=""
        placeholder="Email..."
    />
    <Button
        btnType="Submit"
        form="form"
        type='submit'>
        Submit
    </Button>
    <label onClick={props.reset}>Reset fields</label>
</form> );

Abito Prakash · Accepted Answer · 2019-12-01 13:20:38Z

8

onHandleFormSubmit = (e) =>{  
    e.preventDefault();
    e.target.reset();
}

edited Dec 1, 2019 at 13:20

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

answered Dec 1, 2019 at 10:59

abayomi igwubor

911 silver badge2 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Eric Wallen Over a year ago

This seems to be the easiest way and works. Can anyone explain why this is not the best answer and why the others that set the value using state is more legit? If not then this is so easy.

Andrew B. Over a year ago

Honestly, this worked for me when the other setState wasn't working. Thanks for sharing Abito!

Ion Over a year ago

I consider this to be the best answer because it resets the form without needing to use state.

Rohit Over a year ago

This is the simplest way I have ever found after spending hours. It should be marked as the accepted answer.

Daniel Adepoju · Accepted Answer · 2018-09-25 18:32:44Z

3

You need to make your inputs controlled by passing the value you store in your state then you just have to reset the state values and your component value resets.

check this sample below

handleInputChange = (e) => {
    let { name, value } = e.target;
    this.setState({
      ...this.state,
      inputs: {
      [name]: value
      }
});

}

your component will now look like

<input name='fullName' value={this.state.inputs.fullName} onChange={this.handleInputChange} />

Your reset function will just clear the state and your input field will be empty since it's controlled via state

resetInputFields = () => {
   this.setState({ inputs: {} })
}

answered Sep 25, 2018 at 18:32

Daniel Adepoju

8219 silver badges15 bronze badges

Comments

stackoverfloweth · Accepted Answer · 2018-09-25 18:05:36Z

you should give set your input values based on component state, then just update the component state

class App extends Component {

state = {
    people: [],
    formMessages: [],
    person: null,
    name: "",
    email: "",
};

updateState = (newState) => {
    this.setState(newState);
}

handleFormSubmit = e => {

    e.preventDefault();

    this.addPerson(this.state.name, this.state.email);
    form.reset();
};

resetFormFields = () => {
    this.setState({name:"", email: ""});
}

render() {

    return (
        <div className="App">
            <Form formSubmit={this.handleFormSubmit}  updateState={this.updateState}
                  reset={this.resetFormFields} email={this.state.email} name={this.state.name} />
        </div>
    );
}

and then

const Form = props => (
  <form className={classes.Form}
    id="form"
    onSubmit={props.formSubmit}>

    <input autoFocus
        id="name"
        type="text"
        defaultValue=""
        value={this.props.name}
        onChange={(e) => this.props.updateState({name: e.target.value})}
        placeholder="Name..."
    />
    <input
        id="email"
        type="text"
        defaultValue=""
        value={this.props.email}
        onChange={(e) => this.props.updateState({email: e.target.value})}
        placeholder="Email..."
    />
    <Button
        btnType="Submit"
        form="form"
        type='submit'>
        Submit
    </Button>
    <label onClick={props.reset}>Reset fields</label>
</form> );

Indeed it may not be 'magical' like a pure reset but is more flexible and React friendly.

Collectives™ on Stack Overflow

Reset form input values in React

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related