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

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，通过使用checked（不是值）来维护布尔状态并使用单独的onChange

工作demo is here

工作代码片段：

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 中的 Checking-Unchecking 复选框，您可以参考下面的链接以获取详细说明。 uncheck checkbox programmatically in reactjs

Answer 4

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