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> );

Solution 1

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: {} })
}

Solution 2

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

Solution 3

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> );