React中使用useRef控制输入后，如何触发重渲染实现按钮禁用？

一、使用useState控制输入状态是否是最佳实践？ #

是的，使用useState管理输入状态是这类场景的最佳实践。

React的核心逻辑是「状态驱动UI」，useState的状态变更会自动触发组件重渲染，能让按钮的disabled状态实时跟随输入值变化，完全契合React的单向数据流设计，代码也更易维护、符合社区通用规范。

修改后的示例代码 #

父组件

import { useState } from 'react';

// ...

const [graphicName, setGraphicName] = useState('');

// ...

<TitleInputText
  name=''
  type='text'
  title={inputTitle} 
  placeholder={inputPlaceholder}
  onChange={(value) => setGraphicName(value)}
/>

<button disabled={!graphicName.trim()}>提交</button>

子组件TitleInputText无需修改，保持原有的onChange回调逻辑即可。

二、其他可选解决方案 #

如果因为特殊需求不想用useState，还有以下几种方案，但都不如useState直接高效：

1. 结合useRef与手动触发重渲染 #

如果必须保留useRef（比如需要直接操作输入框DOM），可以通过额外的状态变量手动触发重渲染：

import { useRef, useState } from 'react';

// ...

const graphicName = useRef('');
const [renderTrigger, setRenderTrigger] = useState(0);

const handleInputChange = (value) => {
  graphicName.current = value;
  // 通过更新无关状态触发重渲染
  setRenderTrigger(prev => prev + 1);
};

// ...

<TitleInputText
  name=''
  type='text'
  title={inputTitle} 
  placeholder={inputPlaceholder}
  onChange={handleInputChange}
/>

<button disabled={!graphicName.current.trim()}>提交</button>

这种方案会增加冗余状态，仅适合特殊场景，不推荐作为常规方案。

2. 使用useReducer（适合复杂表单） #

如果表单包含多个输入项，用useReducer统一管理状态会更整洁，本质仍是通过状态变更触发重渲染：

import { useReducer } from 'react';

const formReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_INPUT':
      return { ...state, [action.name]: action.value };
    default:
      return state;
  }
};

// ...

const [formState, dispatch] = useReducer(formReducer, { graphicName: '' });

// ...

<TitleInputText
  name=''
  type='text'
  title={inputTitle} 
  placeholder={inputPlaceholder}
  onChange={(value) => dispatch({ type: 'UPDATE_INPUT', name: 'graphicName', value })}
/>

<button disabled={!formState.graphicName.trim()}>提交</button>

3. 直接读取DOM值（不推荐） #

通过useRef获取输入框DOM，直接读取其value判断按钮状态：

import { useRef } from 'react';

// ...

const inputRef = useRef(null);

// ...

<TitleInputText
  name=''
  type='text'
  title={inputTitle} 
  placeholder={inputPlaceholder}
  ref={inputRef} // 需要子组件转发ref
/>

<button disabled={!inputRef.current?.value.trim()}>提交</button>

注意：这种方式只有在组件触发重渲染时才会更新按钮状态，无法实时响应输入变化，仅适合组件会被其他状态频繁触发重渲染的场景，不推荐常规使用。

内容的提问来源于stack exchange，提问作者Vinicius Alves