受控组件

什么是受控组件

受控组件是指表单元素的值由 React 组件的 state 控制的表单元素。

基本用法

受控组件的表单中的输入值由 React 组件的 state 控制，通过 onChange() 事件来更新 state。

import { useState } from "react";

export default function ControlledDemo() {
  const [userName, setUserName] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setUserName(event.target.value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(userName);
  };
  return (
    <>
      <form onSubmit={handleSubmit}>
        <label>UserName</label>
        <input type="text" value={userName} onChange={handleChange} />
        <button type="submit">Submit</button>
      </form>
    </>
  );
}