取消选中复选框，然后清除表单上的下拉菜单

Question

我想知道如何在提交时清除复选框和下拉菜单。我还有其他字段，例如名称，电子邮件和密码，可以使用此代码清除：

const formSubmit = e => {
e.preventDefault();
console.log("form submitted!")
setFormState({name:"", email: "", password: "", role:"", terms: ""})

但它不会清除角色(即下拉列表(和术语(即复选框(。我不确定一旦提交被击中，如何让他们恢复为默认值。

编辑：所以这是我的角色和术语部分的代码：

<Label htmlFor="roles">
What is your role?
<Select
value={formState.roles}
name="role"
id="roles"
onChange={inputChange}
>
<option selected="true" disabled="disabled" value="Select 
One">Select One</option>
<option value="Full Stack Web Developer">Full Stack Web 
Developer</option>
<option value="Android Developer">Android 
Developer</option>
<option value="iOS Developer">iOS Developer</option>
<option value="UX/UI Designer">UX/UI Designer</option>
</Select>
{errorState.role.length > 0 ? (<Paragraph>{errorState.role}. 
</Paragraph>) : null}
</Label>
<Label htmlFor="terms">
Terms & Conditions
<CheckboxInput
type="checkbox"
name="terms"
id="terms"
value={formState.terms}
onChange={inputChange}
/>
{errorState.terms.length > 0 ? (<Paragraph>{errorState.terms}. 
</Paragraph>) : null}
</Label>

如果需要更多信息，请告诉我！

Answer 1

你应该把CheckboxInput的value道具改成checked。这也意味着您的inputChange处理程序都需要稍作更改以处理复选框类型，并且您的terms状态应存储boolean而不是string。

<CheckboxInput
type="checkbox"
name="terms"
id="terms"
checked={formState.terms}
onChange={inputChange}
/>

setFormState({ name:"", email: "", password: "", role:"", terms: false })

现在Select的默认选项似乎有两个值。

<option value="" disabled={true} value="Select One">Select One</option>

您可以value=""保留第一个以便工作。

<option value="" disabled={true}>Select One</option>

Answer 2

对于您的checkbox，请维护布尔状态并使用单独的 onChange 通过使用checked(不是值(

工作演示在这里

工作代码片段：

export default function App() {
const [formState, setFormState] = useState({
role: "",
terms: false
});
const formSubmit = e => {
e.preventDefault();
console.log("form submitted!");
setFormState({ name: "", email: "", password: "", role: "", terms: false });
};
const inputChange = e => {
const target = e.target;
console.log(target.value);
setFormState(prev => ({ ...prev, [target.name]: target.value }));
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<form onSubmit={formSubmit}>
<select
value={formState.role}
name="role"
id="roles"
onChange={inputChange}
>
<option
selected={true}
// disabled="disabled"
value="select 
One"
>
Select One
</option>
<option value="Full Stack Web Developer">
Full Stack Web Developer
</option>
<option value="Android Developer">Android Developer</option>
<option value="iOS Developer">iOS Developer</option>
<option value="UX/UI Designer">UX/UI Designer</option>
</select>
<input
type="checkbox"
name="terms"
id="terms"
value={formState.terms}
checked={formState.terms}
onChange={e => {
const target = e.target;
setFormState(prev => ({ ...prev, terms: target.checked }));
}}
/>
<button type="submit">submit</button>
</form>
</div>
);
}

Answer 3

在formSubmit事件中，您可以尝试将下拉值设置为默认值，如下所示：

setFormState({name:"", email: "", password: "", role:"Select One", terms: ""})

对于 React 中的选中-取消选中复选框，您可以参考以下链接以获取详细说明。 在 ReactJS 中以编程方式取消选中复选框

Answer 4

这是正常的。如果我很好地理解您的代码，首先是角色，在 setState 中，您正在设置"角色"，而在您的表单中您使用"form.roles"。其次，对于复选框，请使用选中的属性代替，它是布尔值而不是字符串。