提交后清除reactjs钩子中的复选框

Question

我在一个表单中有几个单独的复选框。但我不知道如何在提交后清除复选框。

const App = () =>{

   const funct1 = (e) => {
      if(e.target.checked){
      //some function
      }
   }

   const funct2 = (e) => {
      if(e.target.checked){
      //some function
      }
   }

   const funct3 = (e) => {
      if(e.target.checked){
      //some function
      }
   }
   const submitForm= (e) => {
      //some function
   }
   
   return(
      <div>
         <div>
            Pear <Checkbox onChange={(e)=>funct1(e)} />
         </div>
         <div>
            Apple <Checkbox onChange={(e)=>funct2(e)} />
         </div>
         <div>
            Orange <Checkbox onChange={(e)=>funct3(e)} />
         </div>
         <Button onClick={(e) => submitForm(e)}> Submit </Button>
      </div>
   )
}

我已阅读有关useRef 的信息，但我不确定它在这种情况下如何帮助我。谁能向我解释在这种情况下是否可以使用useRef 来帮助我实现我想要的？

Answer 1

不受控制的解决方案

只需添加一个<input type="reset"> 元素，HTML 就会清除表单中的所有内容

控制溶液

将复选框的值保持为反应状态，并在提交处理程序中重置它们：

const [check1, setCheck1] = useState(false)

<Checkbox value={check1} onChange={e => setCheck1(e.target.checked)} />

Answer 2

您控制通过状态检查的值。你开始取消选中即：useState(false)

import React, { useState } from "react";


function Form() {
 //  initialize your checkbox value
 const [pear, setPear] = useState(false);

 function handleSubmit(){
  // use the pear variable instead of the event values
  // do your submit logic, i would assume some ajax call to a backend. 
  fetch('/myFormSubmitEndpoint')
   .then(response => response.json())
   .then(data => setPear(false)) //here you will do all your "reset" logic AFTER your submit has succeeded
   .catch(...)
 }

 return (
   <form>
     <label>
       Pear
       <input
        checked={pear}
        onChange={e => setPear(!pear)}
        type="checkbox"
        name="pear" />
    </label>

    <button type="submit" onClick={handleSubmit}>Submit</button>
  </form>
 );
} 
export default Form;