提交后清除reactjs挂钩中的复选框
提交后清除reactjs挂钩中的复选框
提问于 2020-07-08 12:50:02
我在一个表单中有几个单独的复选框。但我不知道如何在提交后清除复选框。
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来帮助我实现我想要的？
回答 2
Stack Overflow用户
发布于 2020-07-08 12:54:14
不受控制的解
只需添加一个<input type="reset">元素，HTML就会清除表单中的所有内容
受控解决方案
保持复选框的值为react状态，并在提交处理程序中重置它们：
const [check1, setCheck1] = useState(false)
<Checkbox value={check1} onChange={e => setCheck1(e.target.checked)} />Stack Overflow用户
发布于 2020-07-08 13:23:05
您可以控制checked through状态的值。开始时取消选中，即：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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62787762
复制相关文章
相似问题
腾讯云开发者
