受控组件与非受控组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


import { useState, useRef } from "react";

export default function App() {
  const [value, setValue] = useState("");
  const inputRef = useRef(null);
  const handleOnChange = (e) => {
    setValue(e.target.value);
  };
  const handleOnSubmit = (e) => {
    e.preventDefault();
    console.log("受控数据", value);
    console.log("非受控数据", inputRef.current.value);
  };
  return (
    <div>
      <form onSubmit={handleOnSubmit}>
        <label>
          受控组件
          <input value={value} onChange={handleOnChange} />
        </label>
        <label>
          非受控组件
          <input ref={inputRef} />
        </label>
        <input type="submit" />
      </form>
    </div>
  );
}
Contents
