การกำหนดชนิดอีเวนต์และ Refs ใน TypeScript

เหตุการณ์สังเคราะห์ของ React

การกำหนดชนิดให้ onChange

function SearchInput() {
  const [value, setValue] = useState('');

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

  return <input value={value} onChange={handleChange} />;
}

การกำหนดชนิดให้ onClick

function DeleteButton({ onDelete }: { onDelete: () => void }) {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();
    onDelete();
  };
  return <button onClick={handleClick}>Delete</button>;
}

การกำหนดชนิดให้ onSubmit

function LoginForm() {
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const form = e.currentTarget;
    const email = (form.elements.namedItem('email') as HTMLInputElement).value;
    console.log(email);
  };
  return (
    <form onSubmit={handleSubmit}>
      <input name="email" />
      <button type="submit">Login</button>
    </form>
  );
}

การกำหนดชนิดให้เหตุการณ์แป้นพิมพ์

function CommandInput() {
  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter' && e.metaKey) {
      submitCommand();
    }
  };
  return <input onKeyDown={handleKeyDown} />;
}

useRef สำหรับองค์ประกอบ DOM

function AutoFocusInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  return <input ref={inputRef} />;
}

รีฟแบบเปลี่ยนแปลงได้กับรีฟ DOM

// DOM ref (read-only current)
const divRef = useRef<HTMLDivElement>(null);

// Mutable ref (read-write current)
const countRef = useRef<number>(0);
countRef.current += 1; // ✓ no TypeScript error

การกำหนดชนิดให้ useImperativeHandle

interface DialogHandle {
  open: () => void;
  close: () => void;
}

const Dialog = forwardRef<DialogHandle, { title: string }>((props, ref) => {
  useImperativeHandle(ref, () => ({
    open: () => console.log('open'),
    close: () => console.log('close'),
  }));
  return <div>{props.title}</div>;
});

ฟังก์ชันเรียกกลับของรีฟ

function MeasureDiv() {
  const [height, setHeight] = useState(0);

  const measuredRef = (node: HTMLDivElement | null) => {
    if (node) setHeight(node.getBoundingClientRect().height);
  };

  return <div ref={measuredRef}>Content: {height}px tall</div>;
}

เป้าหมายของเหตุการณ์กับเป้าหมายปัจจุบัน

const handleClick = (e: React.MouseEvent<HTMLUListElement>) => {
  const target = e.target as HTMLLIElement;
  console.log(target.dataset.id);
};

ชนิดตัวจัดการเหตุการณ์แบบเจเนริก

type InputChangeHandler = React.ChangeEventHandler<HTMLInputElement>;

const logChange: InputChangeHandler = (e) => {
  console.log(e.target.value); // e is fully typed
};

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน