React表单输入框如何根据焦点与输入状态动态修改label类名

问题1：普通变量修改后类名不生效 #

原因 #

React函数组件每次触发重渲染都会从头执行整个函数体，你在事件回调里修改的labelClassName只是当前函数执行上下文里的局部变量：

1. 直接修改普通变量不会触发React重渲染，视图根本不会更新
2. 就算后续因为其他原因触发重渲染，函数重新执行时labelClassName会再次被赋值为初始的formInput-label，之前的修改直接丢失
   这就是为什么回调里打印值正确，外层打印永远是初始值的原因。

注意：React中所有会影响视图渲染的可变状态，都必须通过useState管理，不能直接修改普通局部变量。

问题2：useState实现失焦后类名无法移除 #

原因 #

你只实现了聚焦、输入时添加类名的逻辑，既没有监听输入框的失焦事件onBlur，也没有写失焦后重置状态的逻辑，自然类名不会被移除。
另外需要补充通用交互细节：如果失焦时输入框内已经有内容，必须保留shrink类，否则label回落会盖住已输入的内容。

完整修复代码 #

import { useState } from 'react';

const FormInput = ({ label, ...otherProps} ) => {
    // 初始化时判断是否存在默认值，有默认值初始就保持shrink状态
    const [isShrink, setIsShrink] = useState(
        Boolean(otherProps.value?.length || otherProps.defaultValue?.length)
    );

    // 聚焦时直接添加shrink类
    const handleFocus = () => {
        setIsShrink(true);
    }

    // 失焦时根据输入内容判断是否保留shrink类
    const handleBlur = (e) => {
        setIsShrink(Boolean(e.target.value.length));
    }

    const labelClassName = `formInput-label${isShrink ? ' shrink' : ''}`;

    return (
        <div className="group">
            {label && <label className={labelClassName}>{label}</label>}
            <input 
                onFocus={handleFocus} 
                onBlur={handleBlur}
                className="formInput" 
                {...otherProps} 
            />
        </div>
    )
};

逻辑说明 #

• 同时兼容受控组件（传入value属性）和非受控组件（传入defaultValue属性）的默认值场景，避免表单回填时label初始位置错误
• 不需要额外给onChange绑定类名修改逻辑，聚焦时已经触发类名添加，失焦时的判断会自动兜底状态
• 失焦时通过事件对象直接获取输入框最新值，不需要额外维护输入内容的状态，性能更好

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