react如何获得input的值

获取 React 中 input 的值

React 提供了多种方式获取 input 元素的值，以下是常见的方法：

使用受控组件（Controlled Component）

通过将 input 的值绑定到组件的 state，并在 onChange 事件中更新 state 来获取值：

import React, { useState } from 'react';

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

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

  return (
    <input 
      type="text" 
      value={inputValue} 
      onChange={handleChange} 
    />
  );
}

使用非受控组件（Uncontrolled Component）和 ref

通过 ref 直接访问 DOM 元素来获取值：

import React, { useRef } from 'react';

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

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

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

使用 FormData 和表单提交事件

在表单提交时通过 FormData 获取所有输入值：

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

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

每种方法适用于不同的场景，受控组件更适合需要实时验证或控制的表单，而非受控组件和 ref 方法更适合简单场景或需要直接访问 DOM 的情况。