当前位置：首页 > React

react如何获得input的值

2026-01-25 01:14:27React

获取input值的几种方法

在React中获取input元素的值可以通过多种方式实现，以下是常见的几种方法：

受控组件方式 将input的值与组件的state绑定，通过onChange事件更新state值：

function MyForm() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

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

使用ref获取值 通过useRef创建引用，直接访问DOM元素获取值：

function MyForm() {
  const inputRef = useRef(null);

  const handleSubmit = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
}

表单提交时获取 在表单提交事件中通过事件对象获取input值：

function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const value = e.target.elements.myInput.value;
    console.log(value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="myInput" />
      <button type="submit">Submit</button>
    </form>
  );
}

使用FormData对象 适用于包含多个输入的表单：

function MyForm() {
  const handleSubmit = (e) => {
    e.preventDefault();
    const formData = new FormData(e.target);
    console.log(formData.get('username'));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="username" />
      <button type="submit">Submit</button>
    </form>
  );
}

选择哪种方法取决于具体场景：需要实时验证值变化时使用受控组件；只需要最终提交值时可以使用ref或表单提交方式；处理复杂表单时FormData可能更高效。

react如何获得input的值