react如何获取输入框数据

获取输入框数据的方法

在React中获取输入框数据可以通过多种方式实现，以下是几种常见的方法：

受控组件方式 通过将输入框的值与React组件的state绑定，实现数据的双向绑定。每当输入框内容变化时，更新state的值。

import { useState } from 'react';

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

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

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

非受控组件方式 使用ref直接访问DOM元素获取值，适合需要直接操作DOM或表单验证的场景。

import { useRef } from 'react';

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

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

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

表单提交时获取 在表单提交事件中通过事件对象获取输入框的值。

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

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

使用自定义Hook 创建自定义Hook封装输入框逻辑，提高代码复用性。

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return { value, onChange };
}

function CustomHookInput() {
  const inputProps = useInput('');

  return <input type="text" {...inputProps} />;
}

选择哪种方法取决于具体需求。受控组件适合需要实时响应输入变化的场景，非受控组件适合需要直接访问DOM或性能敏感的场景。表单提交方式适合传统表单处理，自定义Hook则能提高代码复用性。