React父子组件自定义Select选择框onChange失效问题排查

问题根源分析 #

• 父组件自动补全过滤逻辑错误
  handleOnChange里的过滤条件写错了，item.value.toString().toLowerCase().startsWith(item.toLowerCase())中，startsWith的参数应该是用户输入的值（e.target.value.toLowerCase()），而不是当前遍历的item本身，否则过滤逻辑完全失效，无法正确筛选出匹配的选项。

• 子组件未同步父组件传入的选中值
  子组件的input绑定的是自身的状态，但没有监听父组件传入的value属性变化来更新这个状态，导致父组件通过selectedValue设置选中值时，子组件输入框无法同步显示。

• 子组件选项点击事件未完成完整交互流程
  子组件的<li>点击仅关闭了下拉框，既没有调用父组件传入的onSelect回调通知父组件更新选中值，也没有将选中的选项值同步到input状态中，导致选中操作无任何反馈。

修复后的代码 #

父组件（SelectComponent）

import { useState, useEffect } from 'react';
import axios from 'axios';
import { SelectField } from './SelectField';

interface ComboBoxOption {
  value: string | number;
  // 可根据需求添加其他属性，比如label
}

export function SelectComponent() {
  const [results, setResults] = useState<ComboBoxOption[]>([]);
  const [selectedValue, setSelectedValue] = useState<ComboBoxOption>();

  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value.trim();
    if (!inputValue) {
      setResults([]);
      return;
    }

    // 修正过滤逻辑：匹配用户输入的值
    const filteredOptions = results.filter(item =>
      item.value.toString().toLowerCase().startsWith(inputValue.toLowerCase())
    );
    setResults(filteredOptions);
  };

  useEffect(() => {
    const fetchData = async () => {
      const response = await axios.get('你的API地址');
      setResults(response.data);
    };
    fetchData();
  }, []);

  return (
    <div>
      <SelectField
        options={results}
        value={selectedValue?.value}
        onChange={handleOnChange}
        onSelect={(item) => setSelectedValue(item)}
        placeholder="请选择"
      />
    </div>
  );
}

子组件（SelectField）

import { useState, useEffect } from 'react';

interface SelectFieldProps {
  options: Array<{ value: string | number }>;
  value?: string | number;
  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
  onSelect: (item: { value: string | number }) => void;
  placeholder?: string;
}

export function SelectField({
  options,
  value,
  onChange,
  onSelect,
  placeholder = ''
}: SelectFieldProps) {
  const [isOpen, setIsOpen] = useState(false);
  const [inputValue, setInputValue] = useState('');

  // 监听父组件传入的value变化，同步到inputValue
  useEffect(() => {
    if (value !== undefined) {
      setInputValue(value.toString());
    }
  }, [value]);

  const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
    setIsOpen(true);
    setInputValue(event.target.value);
    onChange(event);
  };

  const handleOptionClick = (item: { value: string | number }) => {
    setIsOpen(false);
    setInputValue(item.value.toString());
    onSelect(item);
  };

  return (
    <div>
      <input
        placeholder={placeholder}
        value={inputValue}
        onChange={handleOnChange}
      />
      <button onClick={() => setIsOpen(!isOpen)}>下拉</button>
      {isOpen && (
        <ul>
          {options.map((option, index) => (
            <li
              key={index}
              onClick={() => handleOptionClick(option)}
            >
              <span>{option.value}</span>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

关键修复点说明 #

1. 父组件修正了过滤逻辑，确保自动补全能正确筛选匹配选项。
2. 子组件添加useEffect监听父传value，实现父子组件状态同步。
3. 子组件完善了选项点击事件，同步更新input状态并通知父组件更新选中值。

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