受控组件和非受控组件

受控组件

例子：

const Login: React.FC<{}> = () => {
  const [user, setUser] = useState<string>('');
  return (
    <>
      <div>login</div>
        <label htmlFor="username">
          <input type="text" name="username" value={user} onChange={(e)=>setUser(e.target.value)} />
        </label>
    </>
  );
};

export default Login;

非受控组件

例子：

const Login: React.FC<{}> = () => {
  const [user, setUser] = useState<string>('');
  const inputEl = createRef<HTMLInputElement>();
  const cahngeValue =()=>{
    if(inputEl.current){
       setUser(inputEl.current.value)
  }
 }
  return (
    <>
      <div>login</div>
        <label htmlFor="username">
          <input type="text" name="username" ref={inputEl } defaultValue={user} onBlur={cahngeValue}} />
        </label>
    </>
  );
};

export default Login;