Reacthooks获取input值的3种方式

使用useRef

import { useRef, useState } from "react";

const Input1 = () => {
  const inputElement = useRef<HTMLInputElement>(null);
  const [text, setText] = useState<string>("");
  const inputChangeHandler = () => {
    setText(inputElement.current!.value);
  };

  return (
    <div>
      <h1>使用useRef</h1>
      <h2>{text}</h2>
      <input type="text" ref={inputElement} onChange={inputChangeHandler} />
    </div>
  );
};

export default Input1;

使用useState

import { ChangeEvent, useState } from "react";

const Input2 = () => {
  const [text, setText] = useState<string>("");
  const textChangeHandler = (event: ChangeEvent) => {
    setText((event.target as HTMLInputElement).value);
  };

  return (
    <div>
      <h1>使用useState</h1>
      <h2>{text}</h2>
      <input type="text" value={text} onChange={textChangeHandler} />
    </div>
  );
};

export default Input2;

使用useState和泛型

import { ChangeEvent, useState } from "react";

const Input3 = () => {
  const [text, setText] = useState<string>("");
  const textChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

  return (
    <div>
      <h1>使用useState和泛型</h1>
      <h2>{text}</h2>
      <input type="text" value={text} onChange={textChangeHandler} />
    </div>
  );
};

export default Input3;

这篇好文章是转载于：学新通技术网