Creatable 从 react-select/creatable 中选择 React-final-form 中的 API 集成

问题描述

我已经成功地将 creatable 与 react-final-form 集成，但是当我尝试进行 API 调用时出现问题。我正在尝试使用 onIputChange 进行 API 调用，但是每当我收到响应（在道具中）时，我的下拉菜单就会关闭。它关闭接收新选项。我用普通的选择试了一下，效果很好。这是我的示例代码。

                           <Field
                            name="tags"
                            component={ ({
                                input,...rest
                            }) => (<CreatableSelect {...input}
                                {...rest}}
                            />)}
                            isMulti
                            options={sortedTagsOptions}
                            onInputChange={(x) => handleChangeTypeheadInput(x)}/>

API 调用工作正常。只发生一个问题，下拉列表关闭并失去焦点，并且选择中的写入值消失。如果有人对如何处理这个问题有任何想法，请告诉我。不过，这在没有 Field 组件的情况下工作正常。也许改变表单值？但在这方面也有问题。

解决方法

通过创建一个单独的组件而不是在一个组件中完成所有工作来解决它。

const AppCreateableSelectForm = ( {
    input: {
        name,onChange,value,},className,incomingOptions,isClearable,isMulti,onFocus,closeMenuOnSelect,incomingStyle,isDisabled,placeholder,onInputChange,noOptionsMessage,}) => {
return  <CreatableSelect
            name={name}
            isMulti={isMulti}
            onFocus={onFocus}
            closeMenuOnSelect={closeMenuOnSelect}
            options={incomingOptions}
            isClearable={isClearable}
            placeholder={placeholder ? placeholder:`Select`}
            className={className}
            isDisabled={isDisabled}
            styles={incomingStyle ? incomingStyle : style}
            value={value}
            onChange={onChange}
            onInputChange={onInputChange}
            noOptionsMessage={noOptionsMessage}
            theme={theme => ({
                ...theme,colors: {
                    ...theme.colors,primary: `#637282`,})}
            components={{
                IndicatorSeparator: () => null,}}
        />

此代码中可能未使用某些道具，因为我仅复制了相关代码。