React 中没有 v-model如何优雅地处理表单输入(最新推荐)

<template>
  <input v-model="value" />
</template>

function App() {
  const [value, setValue] = useState("");
  return (
    <input 
      value={value} 
      onChange={e => setValue(e.target.value)} 
    />
  );
}

function App() {
  const inputRef = useRef("");
  return (
    <input 
      onChange={e => (inputRef.current = e.target.value)} 
    />
  );
}

function LoginForm() {
  const [formData, setFormData] = useState({
    username: "",
    password: ""
  });
  const handleChange = (field) => (e) => {
    setFormData(prev => ({
      ...prev,
      [field]: e.target.value
    }));
  };
  return (
    <form>
      <input 
        value={formData.username} 
        onChange={handleChange("username")} 
      />
      <input 
        type="password"
        value={formData.password} 
        onChange={handleChange("password")} 
      />
    </form>
  );
}

function UncontrolledForm() {
  const usernameRef = useRef();
  const passwordRef = useRef();
  const handleSubmit = (e) => {
    e.preventDefault();
    const data = {
      username: usernameRef.current.value,
      password: passwordRef.current.value
    };
    console.log("表单数据:", data);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input ref={usernameRef} />
      <input type="password" ref={passwordRef} />
      <button type="submit">提交</button>
    </form>
  );
}