可创建从react-Select/Creatable中选择，并以react-final-form与API集成

Question

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

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

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

Answer 1

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

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,
}}
/>

由于我只复制了相对的代码，所以一些道具可能不会在这段代码中使用。