如何清除 ReactJS 中的受控输入？

您拥有的不是受控输入，正如 Jayce444 指出的那样。如果你想清除输入，那么你可以做以下两件事之一：

1. 实际上通过相应地设置 value 道具来控制您的输入。然后提交处理程序中的状态更新将清除状态并反映在输入的值中。

   <FormInput
     type="email"
     required
     onChange={handleEmailChangE}
     value={email}
   />
   ...
   <FormInput
     type="password"
     required
     onChange={handlepasswordChangE}
     value={passworD}
   />
   

2. 让它们不受控制并通过处理程序中的 onSubmit 事件清除输入。为每个输入提供一个 id 以在提交处理程序中访问并重置它们的值。

   const handleSubmit = (E) => {
     e.preventDefault();
   
     console.log(email,password);
     setEmail("");
     setpassword("");
   
     e.target.email.value = "";
     e.target.password.value = "";
   };
   
   ...
   
   <FormInput
     type="email"
     required
     onChange={handleEmailChangE}
     id="email"
   />
   ...
   <FormInput
     type="password"
     required
     onChange={handlepasswordChangE}
     id="password"
   />
   

它是一个不受控制的组件。这意味着您从输入传递值的单一方法。但无法通过 Dom 更改输入。

所以最好使用受控组件value={email}。所以这将重置 通过状态的价值。

我已经通过关键更新方法针对这个不受控制的组件发布了解决方案。

Example Codesanbox

import React,{ useState } from "react";
import {
  Container,Form,FormButton,FormContent,FormH1,FormInput,FormLabel,FormWrap,Icon,Text,} from "./SigninElements";

const keyGen = () => 'key'+Math.round(R_959_11845@ath.random()*10000000000000);
const SignIn = () => {
  const [key,setKey] = useState(keyGen());
  const [email,setEmail] = useState("");
  const [password,setpassword] = useState("");

  const handleEmailChange = (E) => {
    setEmail(e.target.value);
  };
  const handlepasswordChange = (E) => {
    setpassword(e.target.value);
  };

  const handleSubmit = (E) => {
    e.preventDefault();
    console.log(email,password);
    setEmail("");
    setpassword("");
    setKey(keyGen())
  };
  return (
    <Container>
      <FormWrap>
        <Icon to="/">Sushi Finder</Icon>
        <FormContent key={key}>
          <Form action="POST" onSubmit={handleSubmit}>
            <FormH1>Sign in to your account</FormH1>
            <FormLabel htmlFor="for">Email</FormLabel>
            <FormInput type="email" required onChange={handleEmailChangE} />
            <FormLabel htmlFor="for">password</FormLabel>
            <FormInput
              type="password"
              required
              onChange={handlepasswordChangE}
            />
            <FormButton type="submit">ConTinue</FormButton>
            <Text>Forgot password</Text>
          </Form>
        </FormContent>
      </FormWrap>
    </Container>
  );
};

export default SignIn;

您还可以使用 useRef() 来控制这些输入元素，包括清除它们。像这样为每个输入声明它们：

const input1 = React.useRef();
const input2 = React.useRef();

然后使用 FormInput 的 ref 属性：

<FormInput
  ref={input1}
  type="password"
  required
  onChange={handlepasswordChangE}
  id="password"
/>

然后您可以像这样在 handleSubmit 函数中清除它们：

input1.current.value = ""

受控组件的美妙之处在于您可以在 DOM 之外控制它们。您只需将值状态变量设置为 null。

const [myValue,setMyValue] = React.useState(null)

const clearValue = () => {
  setMyValue(null)
}

const handLeonChange = (event) => {
  setMyValue(event.target.value)
}

return <>
  <FormInput
    onChange={handLeonChangE}
    value={myvalue}
  />
  <Button onClick={Clearvalue}>Clear</Button>
</>

由于清除按钮在点击时调用 clearValue 并且 clearValue 在点击时将 @H_768_5@myValue 设置为 null，这应该会清除您输入的值。受控组件由一个变量驱动，该变量由用户键入的内容更新。不受控制的组件仅由用户键入的内容驱动。

要使用受控组件，您需要将状态变量传回组件。