非受控組件(Uncontrolled component)

表單資料由DOM中處理，控制來源在自己本身而不是其他props資料(DOM)

import React, { useRef } from "react";

const Uncontrolled = () => {
  const inputEl = useRef("");
  const selectEl = useRef("");
  const labelEl = useRef("");
  const handleClick = (e) => {
    console.log(inputEl.current.value);
    console.log(selectEl.current.value);
    console.log(labelEl.current.checked);
  };
  return (
    <>
      <h3>Uncontrolled</h3>
      <input defaultValue={"123"} ref={inputEl} />
      <select defaultValue={"banana"} ref={selectEl}>
        <option>apple</option>
        <option>banana</option>
        <option>orange</option>
        <option>watermelon</option>
      </select>
      <label>
        <input type="checkbox" defaultChecked ref={labelEl} />
      </label>
      <input type="button" value="Submit" onClick={handleClick} />
    </>
  );
};

export default Uncontrolled;

受控組件(controlled component)

在react中用state(setState)或props傳遞控制表單狀態的方式

• select ⇒ 在表單中須透過value的方式控制，而不是selected

import React, { useState } from "react";

const Controlled = () => {
  const [inputValue, setInputValue] = useState("");
  const [selectValue, setSelectValue] = useState("lime");
  const [checkedValue, setCheckedValue] = useState("");
  return (
    <>
      <h3>Controlled</h3>
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <select
        value={selectValue}
        onChange={(e) => setSelectValue(e.target.value)}
      >
        <option value="grapefruit">Grapefruit</option>
        <option value="lime">Lime</option>
        <option value="coconut">Coconut</option>
        <option value="mango">Mango</option>
      </select>
      <label>
        <input
          type="checkbox"
          onChange={() => setCheckedValue(1)}
          checked={checkedValue === 1}
        />
        <input
          type="checkbox"
          onChange={() => setCheckedValue(2)}
          checked={checkedValue === 2}
        />
      </label>
      <input
        value="送出"
        type="button"
        onClick={() =>
          console.log(`${inputValue}, ${selectValue}, ${checkedValue}`)
        }
      />
    </>
  );
};

export default Controlled;