React Final Form 自定义Autocomplete组件onFocus事件无法触发问题咨询

核心问题点 #

• 自定义Autocomplete组件未声明接收onFocus、onChange、onBlur等事件回调属性，适配层传入的事件没有被组件捕获
• 组件内部输入框的焦点、变更事件处理函数中，没有调用外部传入的对应事件回调，事件无法透传到React Final Form的input对象上
• 参数名不匹配：Autocomplete接收的最小字符参数为minimumSearchValue，但适配层传入的是minSearchLength，导致最小字符判断逻辑失效
• 选中值未同步：当前选中的选项存储在Autocomplete内部的selectedOptions状态中，没有同步给React Final Form，表单无法拿到该字段的提交值

修复步骤 #

1. 调整Autocomplete组件入参，接收事件回调 #

修改组件声明，新增需要透传的事件属性：

// 修改前
const Autocomplete = ({id, label, options, minimumSearchValue}) => {
// 修改后
const Autocomplete = ({id, label, options, minimumSearchValue, onFocus, onChange, onBlur}) => {

2. 在内部事件处理函数中调用外部回调 #

以onFocus为例，在原有逻辑后新增对传入回调的调用：

const onSearchInputFocus = (e) => {
    const {value} = e.target;  
    setSearchValue(value);
    if (hasMinSearchValue(value) && !isMenuPanelVisible) setIsMenuPanelVisible(true);
    // 新增：透传焦点事件给上层
    onFocus?.(e, value);
}

同理在onSearchInputChange函数末尾新增onChange?.(e, e.target.value)，根据业务需要也可以在选中/取消选项时调用onChange同步最终选中值。

3. 同步选中值到React Final Form #

在选中、移除选项的逻辑中，将最新的选中数组同步给表单：

const addSelectedOption = ({value}) => {
    if (!find(selectedOptions, {value})) {
        const newOptions = [...selectedOptions, {value}]
        setSelectedOptions(newOptions);
        // 同步选中值到表单
        onChange?.(newOptions);
    }
}

const removeSelectedOption = ({value}) => {
    const newOptions = selectedOptions.filter(item => item.value !== value)
    setSelectedOptions(newOptions);
    // 同步选中值到表单
    onChange?.(newOptions);
}

4. 修正参数名不匹配问题 #

将适配层的传参改为和组件定义一致即可：

// 修改前
<Autocomplete {...input} {...rest} options={filteredOptions} minSearchLength={0} onFocus={(event, value) => {
// 修改后
<Autocomplete {...input} {...rest} options={filteredOptions} minimumSearchValue={0} onFocus={(event, value) => {

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