I want to reset my form after clicking submit in reactjs. I have tried making another method. but it-CodePudding

import React,{ useState} from 'react';
import { Button, Checkbox, Form } from 'semantic-ui-react';
import axios from 'axios';
 
const Create = () => {
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [checkbox, setCheckBox] = useState(false);

Here I am sending data to a mock api I created

const postData = () =>{
        axios.post(`https://61cb2af8194ffe0017788c01.mockapi.io/fakeData`,{
            firstName,
            lastName,
            checkbox
        })     
    }

This is the method I created to reset the form but it does not work.

const resetForm = () => {
        postData();
        setFirstName(" ");
        setLastName(" ");
        setCheckBox(false);
    }

This is my form where on click i am calling resetForm function but it is not resetting it is sending the data but not resetting the form.

return(
    <div> 
         <Form> 
            <Form.Field>
                <label>First Name</label>
                <input  id="f1" placeholder='First Name' onChange={(e)=>setFirstName(e.target.value) } />
                
            </Form.Field>
            <Form.Field>
                <label>Last Name</label>
                <input id="last1" placeholder='Last Name'  onChange={(e)=>setLastName(e.target.value)}/>
            </Form.Field>
            <Form.Field>
                <Checkbox id="c1" label='I agree to the Terms and Conditions' onChange={(e)=>setCheckBox(!checkbox)}/>
            </Form.Field>
                <Button type='submit' onClick={resetForm}>Submit</Button>
        </Form>
        <br></br>
        <Button onClick={()=>navigate(-1)}>Go Back</Button>
    </div>
    
  )

}

export default Create;

CodePudding user response：

Actually it will reset the form, the problem is you do not use Controlled Components to show the latest update value in UI

you should bind the value like this:

<input type="text" value={this.state.value} onChange={this.handleChange} />

You can refer the doc here: https://reactjs.org/docs/forms.html

CodePudding user response：

You can reset your form using the native form.reset() method.

const Create = () => {
  const ref = React.useRef(null);
  const resetForm = () => ref.current.reset();

  return (
    <div>
      <Form ref={ref}>
        <Form.Field>
          <label>First Name</label>
          <input id="f1" placeholder="First Name" onChange={(e) => setFirstName(e.target.value)} />
        </Form.Field>
        <Form.Field>
          <label>Last Name</label>
          <input id="last1" placeholder="Last Name" onChange={(e) => setLastName(e.target.value)} />
        </Form.Field>
        <Form.Field>
          <Checkbox
            id="c1"
            label="I agree to the Terms and Conditions"
            onChange={(e) => setCheckBox(!checkbox)}
          />
        </Form.Field>
        <Button type="submit" onClick={resetForm}>
          Submit
        </Button>
      </Form>
      <br></br>
      <Button onClick={() => navigate(-1)}>Go Back</Button>
    </div>
  );
};

export default Create;

CodePudding user response：

For that, you have to set value property in your input. Try this

const Create = () => {
  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [checkbox, setCheckBox] = useState(false);

  const postData = () => {
    console.log(firstName, lastName, checkbox);
  };

  const resetForm = () => {
    postData();
    setFirstName(" ");
    setLastName(" ");
    setCheckBox(false);
  };

  return (
    <div>
      <Form>
        <Form.Field>
          <label>First Name</label>
          <input
            id="f1"
            placeholder="First Name"
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        </Form.Field>
        <Form.Field>
          <label>Last Name</label>
          <input
            id="last1"
            placeholder="Last Name"
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        </Form.Field>
        <Form.Field>
          <Checkbox
            id="c1"
            label="I agree to the Terms and Conditions"
            checked={checkbox}
            onChange={(e) => setCheckBox(!checkbox)}
          />
        </Form.Field>
        <Button type="submit" onClick={resetForm}>
          Submit
        </Button>
      </Form>
    </div>
  );
};