当前位置：首页 > React

react如何获取input

2026-02-12 01:54:04React

获取 input 值的常用方法

受控组件方式
通过 React 的状态管理（useState）直接绑定 input 的值，实时同步数据：

import React, { useState } from 'react';

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

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

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

非受控组件方式
使用 useRef 获取 DOM 节点，在需要时读取值（如提交表单时）：

import React, { useRef } from 'react';

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

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

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

表单提交场景的处理

通过事件对象获取
在表单的 onSubmit 事件中，通过 e.target 访问表单内的 input：

function FormExample() {
  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>
  );
}

动态 input 列表的管理

使用状态数组存储多个输入
适用于动态生成的 input 列表，通过索引或 ID 管理：

function DynamicInputs() {
  const [inputs, setInputs] = useState(['']);

  const handleChange = (index, value) => {
    const newInputs = [...inputs];
    newInputs[index] = value;
    setInputs(newInputs);
  };

  return (
    <div>
      {inputs.map((value, index) => (
        <input
          key={index}
          value={value}
          onChange={(e) => handleChange(index, e.target.value)}
        />
      ))}
    </div>
  );
}

性能优化建议

对于高频输入的场景（如实时搜索），可通过防抖（debounce）减少状态更新频率：

react如何获取input

import { debounce } from 'lodash';

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

  const debouncedHandleChange = debounce((val) => {
    console.log('最终值:', val);
  }, 500);

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

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