mardi 9 mars 2021

How remove React visible checkmark after form reset?

I'm working on a React app with a button to reset a form. When the user clicks the "Reset" button, all the states revert to their original values. But a checkmark remains selected even after all the other data clears. It does appear to reset the state, but the checkmark is still visible and confusing to the user. I understand that defaultChecked is read on the initial load, but the checkmark remains even if I remove defaultChecked completely, so I'm not sure where the problem is. I suspect the solution might involve onChange, but I haven't been able to get that to work. Any help appreciated.

const [checked, setChecked] = useState(false);

const clearSearch = () => {
 setResults([]);
 setQuery("");
 setFormat("");
 setChecked(false); 
}

<label>
  <input 
    type="checkbox" 
    id="searchAll"
    defaultChecked={checked}
    onChange={() => setChecked(!checked)}
    />
    Search all formats
 </label>


<button className="btn btn-danger" 
  onClick={event => {
  event.preventDefault();
   clearSearch();
    }}>
    Reset
 </button>

App.js on GitHub https://github.com/irene-rojas/loc/blob/master/src/App.js




Aucun commentaire:

Enregistrer un commentaire