In react deselect the radio button after all the input fields have been processed-CodePudding

I am creating a form in react, where the user enters into the input text fields: name, role and selects the gender by the radio button. On clicking the submit button the user stores the entered data into a state. The values are displayed below the form. What I want is, every time the submit button is pressed, the new values added gets displayed, as well as all of the fields get empty as well. I know how to reset the input text fields but am not able to reset the radio buttons. Any Idea how can I reset the radio buttons as well. The code is :

const [user, setUser] = useState({});    // state is created

the form body is :

<div className="entryForm">
            <span>
                <label htmlFor="name">Name</label>
                <input
                    type="text"
                    id="name"
                    value={user?.name}
                    onChange={(e) =>
                        setUser((prev) => ({
                            ...prev,
                            name: e.target.value,
                        }))
                    }
                ></input>
            </span>
            <span>
                <label htmlFor="role">Role</label>
                <input
                    type="text"
                    id="role"
                    value={user?.role}
                    onChange={(e) =>
                        setUser((prev) => ({
                            ...prev,
                            role: e.target.value,
                        }))
                    }
                ></input>
            </span>
            <h3>Gender</h3>
            <div className="radio">
                <span>
                    <input
                        type="radio"
                        id="male"
                        value="male"
                        name="gender"
                        onChange={(e) =>
                            setUser((prev) => ({
                                ...prev,
                                gender: e.target.value,
                            }))
                        }
                    ></input>
                    <label htmlFor="male">Male</label>
                </span>
                <span>
                    <input
                        type="radio"
                        id="female"
                        value="female"
                        name="gender"
                        onChange={(e) =>
                            setUser((prev) => ({
                                ...prev,
                                gender: e.target.value,
                            }))
                        }
                    ></input>
                    <label htmlFor="female">Female</label>
                </span>
            </div>
            <button
                onClick={() => {
                    dispatch(addUser(user));   // to send data to other component
                    setUser({
                        name: "",
                        role: "",
                        gender: "",
                    });
                }}
            >
                Submit
            </button>
        </div>

CodePudding user response：

Input type="radio" has attribute name checked, you can toggle it with true/false value. From what I understand from your code, your input should look something like this

<input 
  type="radio" 
  name="gender" 
  value="female" 
  checked={(user?.gender == 'female')} //which will be true if female was choosen
/>

and then when you complete sending the data you can set user.gender = false

CodePudding user response：

This is a perfect example of where you can use features of native html to help you achieve your goal. On top of that, you should almost always wrap any form in an actual <form> tag.

In your case, it should be as easy as changing your div to a form:

<form className="entryForm">
...
</form>

Then you can call form.reset() on the form, which will revert the form to its initial state. You will need a ref to the form in order to do this:

const formRef = useRef();

<form ref={formRef} className="entryForm">
  ...
  <button
     type="submit"
     onClick={() => {
        ...
        formRef.current.reset(); 
     }}>
     Submit
  </button>

NOTE: if you add type="submit" to your button, and the button is inside a <form/>, then users can submit the form by hitting ENTER - which is good for usability.

Here's a full example: https://playcode.io/985741

CodePudding user response：

set the value value="male" of your radio buttons by using useState and set the state empty when the button is pressed or when the data is send