当前位置：首页 > React

react如何动态设置input的值

2026-01-26 02:53:00React

动态设置 input 值的方法

在 React 中，动态设置 input 的值通常需要结合状态管理（如 useState）和受控组件（controlled component）的概念。以下是几种常见方法：

使用受控组件

通过 value 属性和 onChange 事件绑定状态，实现双向数据绑定：

react如何动态设置input的值

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} 
    />
  );
}

通过外部数据动态更新

当需要根据 props 或其他状态更新 input 值时，可使用 useEffect 监听变化：

react如何动态设置input的值

import { useState, useEffect } from 'react';

function DynamicInput({ initialValue }) {
  const [value, setValue] = useState('');

  useEffect(() => {
    setValue(initialValue); // 当 initialValue 变化时更新 input
  }, [initialValue]);

  return <input value={value} onChange={(e) => setValue(e.target.value)} />;
}

使用 ref 非受控方式

若需手动设置 input 值（非受控组件），可通过 useRef 直接操作 DOM：

import { useRef } from 'react';

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

  const setInputValue = (newValue) => {
    if (inputRef.current) {
      inputRef.current.value = newValue;
    }
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={() => setInputValue('New Value')}>
        设置值
      </button>
    </>
  );
}

动态表单场景

处理多个动态 input 时，可通过对象或数组管理状态：

function MultiInputForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  return (
    <>
      <input 
        name="username" 
        value={formData.username} 
        onChange={handleChange} 
      />
      <input 
        name="email" 
        value={formData.email} 
        onChange={handleChange} 
      />
    </>
  );
}