当前位置：首页 > React

react 控件值如何刷新

2026-03-11 04:27:55React

如何刷新 React 控件值

在 React 中，控件值的刷新通常通过状态管理实现。以下是几种常见方法：

使用状态（State）管理 通过 useState Hook 声明状态变量，并在需要刷新时调用状态更新函数。例如输入框的值刷新：

react 控件值如何刷新

import { useState } from 'react';

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

  const handleChange = (e) => {
    setValue(e.target.value); // 更新状态触发重新渲染
  };

  const resetValue = () => {
    setValue(''); // 重置为空字符串
  };

  return (
    <div>
      <input value={value} onChange={handleChange} />
      <button onClick={resetValue}>Reset</button>
    </div>
  );
}

通过 Props 更新 如果控件值由父组件通过 props 传递，父组件状态变化会触发子组件重新渲染：

react 控件值如何刷新

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

  const updateValue = () => {
    setValue('new value');
  };

  return (
    <div>
      <ChildComponent value={value} />
      <button onClick={updateValue}>Update Value</button>
    </div>
  );
}

function ChildComponent({ value }) {
  return <input value={value} readOnly />;
}

使用 ref 强制更新 对于非受控组件，可通过 useRef 直接操作 DOM 元素修改值：

import { useRef } from 'react';

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

  const refreshValue = () => {
    inputRef.current.value = ''; // 直接修改 DOM 元素值
  };

  return (
    <div>
      <input ref={inputRef} defaultValue="initial" />
      <button onClick={refreshValue}>Clear</button>
    </div>
  );
}

依赖外部状态管理 在 Redux 或 Context API 等全局状态方案中，状态变化会自动触发关联组件更新：

import { useContext } from 'react';
import { AppContext } from './context';

function ContextInput() {
  const { state, dispatch } = useContext(AppContext);

  const handleUpdate = () => {
    dispatch({ type: 'UPDATE_VALUE', payload: 'updated' });
  };

  return (
    <div>
      <input value={state.value} readOnly />
      <button onClick={handleUpdate}>Refresh</button>
    </div>
  );
}