React: 受控组件与非受控组件

受控组件

受 react 控制的组件。
react 的特性：UI = f(props, state)。函数式的特性，只有state 和 props 改变了，UI 才会变。
给 input 的 value 绑定到一个 state。

import { useState } from "react";

export default function App() {
  const [value, setValue] = useState("");
  // UI上input输入框的值如果要变化，一定要有state的变化来触发它，如果不写onChange回调，在input输入框输入值后，UI不会随之变化
  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

非受控组件

不受 react 控制的组件。
不使用 state 和 props，让 input 自身控制UI的变化。
不让 input 的 value 绑定为一个 state，但是可以随意设置 input 的defaultValue。
要获取 input 的 value，只能通过 ref 的形式。

import { useRef, useState } from "react";

export default function App() {
  const [value, setValue] = useState("");
  const inputRef = useRef(null);

  const handleChange = () => {
    if (inputRef.current) {
      console.log(inputRef.current.value);
    }
  };
  return <input defaultValue={value} ref={inputRef} onChange={handleChange} />;
}