扩展ChakraUI Input组件时onChange未触发问题求助

核心问题分析 #

1. 属性被覆盖：你将{...props}放在组件属性列表的最后，导致父组件传入的onChange、value或defaultValue会覆盖自定义配置，直接造成内部handleChange无法触发。
2. 受控/非受控状态混乱：
   • 初始化了value状态但未在handleChange中更新，若后续绑定value到输入框，会因状态未同步导致输入框只读。
   • 混用defaultValue与可能从props传入的value，引发Chakra UI Input组件的状态逻辑冲突。

修复步骤 #

1. 调整属性顺序，避免自定义配置被覆盖

把{...props}放在属性列表最前面，后续自定义属性会覆盖父组件传入的同名配置，确保内部onChange和值配置生效。

2. 统一受控/非受控逻辑

• 优先使用父组件传入的value（受控模式），未传入则用本地状态+defaultValue（非受控模式）。
• 在handleChange中同步更新本地状态，并写入localStorage，同时兼容父组件传入的onChange回调。

修改后的完整代码 #

import { ChangeEvent, useState, forwardRef } from 'react';
import { Input, InputProps } from '@chakra-ui/react';

interface StoredInputProps {
  name: string;
  defaultValue?: string;
  placeholder?: string;
  autoCapitalize?: string;
}

type CombinedInputProps = StoredInputProps & InputProps;

const StoredInput = forwardRef<HTMLInputElement, CombinedInputProps>(
  ({ name, defaultValue = '', placeholder = '', autoCapitalize = 'none', value: propsValue, onChange: propsOnChange, ...props }, ref) => {
    // 初始化本地状态：优先取localStorage，其次是props.defaultValue
    const [localValue, setLocalValue] = useState<string>(() => {
      const storedValue = localStorage.getItem(name);
      return storedValue !== null ? storedValue : defaultValue;
    });

    // 确定当前使用的值：受控模式用propsValue，非受控用localValue
    const currentValue = propsValue !== undefined ? propsValue : localValue;

    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
      console.log("Handle Change");
      const newValue = event.target.value;
      
      // 非受控模式下更新本地状态
      if (propsValue === undefined) {
        setLocalValue(newValue);
      }
      // 写入localStorage
      localStorage.setItem(name, newValue);
      // 调用父组件传入的onChange（如果存在）
      propsOnChange?.(event);
    };

    return (
      <Input
        {...props}
        id={name}
        name={name}
        // 受控模式用value，非受控用defaultValue
        {...(propsValue !== undefined ? { value: currentValue } : { defaultValue: currentValue })}
        onChange={handleChange}
        placeholder={placeholder}
        autoCapitalize={autoCapitalize}
        ref={ref}
      />
    );
  }
);

export default StoredInput;

额外说明 #

• 组件现在同时支持受控和非受控模式：父组件传入value和onChange时遵循受控逻辑，否则自动用本地状态+localStorage管理。
• 保留了对父组件onChange的调用，保证组件扩展性。

内容的提问来源于stack exchange，提问作者Otávio Monteagudo