Javascript 选择未聚焦时，反应选择输入内容消失

我已经愉快地使用react select有一段时间了，但是在组件的

可创建版本方面遇到了问题

这是我的密码：

const options = [
  {
    label: 'One',
    value: 'One'
  },
  {
    label: 'Two',
    value: 'Two'
  },
  {
    label: 'Three',
    value: 'Three'
  },
  {
    label: 'Four',
    value: 'Four'
  }
];

const selectedItems = [
  {
    label: 'One',
    value: 'One'
  }
];

const App = () => (
  <div style={styles}>
    <Select.Creatable
      backspaceRemoves={true}
      multi
      openOnFocus={false}
      openOnClick={false}
      onSelectResetsInput={false}
      onBlurResetsInput={false}
      onCloseResetsInput={false}
      arrowRenderer={() => null}
      clearRenderer={() => null}
      options={options}
      value={selectedItems} />
  </div>
);

const选项=[
{
标签:"一",，
价值观：“一”
},
{
标签:"两个",，
价值：两个
},
{
标签:"三",，
价值观：“三”
},
{
标签:"四",，
值：“四”
}
];
常量selectedItems=[
{
标签:"一",，
价值观：“一”
}
];
常量应用=（）=>(
空}
clearRenderer={（）=>null}
选项={options}
值={selectedItems}/>
);

我还在这里创建了一个可运行的版本：

如您所见，如果您访问沙箱页面，当用户单击离开时，任何输入select的文本都会消失。如果选择再次获得焦点，它将重新出现


明确地说，我的问题是关于输入中输入的文本“2”-这不是所选值的问题（如果配置了正确的状态和回调，这些值可以正常工作）

如何使react select保留输入的内容？它似乎是在内部记住值，但在文本输入不再具有焦点时隐藏文本输入。我原以为将各种
onFooResetsInput
all设置为false就可以实现这一点，但效果并不理想

我的应用程序正在使用输入到该输入中的文本值来影响UI的其他元素，因此当文本被隐藏时，它会显示不同步


反应选择版本：1.2.1（最新）
react和react dom版本：15
或16（两者都表现出这种行为）
您需要处理onChange事件，并使selectedItems成为组件状态的一部分。在你的情况下，selectedItems永远不会改变

看看

编辑

是的，它和输入者一起工作。函数的默认参数将值传递给输入（这就是为什么输入值消失的原因，因为当它为onBlur时，它会将值“”传递给输入。可能是react select上的错误，因为我们有onBlurResetsInput标志false），所以我们需要在将其传递给自己的输入之前删除它。更新了上的代码，适用于仍对反应选择版本2的解决方案感兴趣的任何人

下面的解决方案适用于反应选择v2

文件-

import React，{useState}来自“React”
从“反应选择”导入{default as ReactSelect}；
功能选择（道具）{
常量[inputValue，setinputValue]=useState（“”）
const onInputChange=（inputValue，事件）=>{
if（event.action=='input-change'）{
设置输入值（输入值）
}  
}
返回(
)
}
导出默认选择
谢谢，但这仍然显示出问题所在。我的问题不是选择项，而是文本框的内容（用于过滤下拉列表中选项的字符串-在我的示例中是文本“2”）。很抱歉，如果我的GIF中不清楚的话。我已经编辑了这个问题，希望能让它更清楚一点。是的，我刚刚意识到我读了你的问题lol。我想如果onBlurResetsInput=false不起作用，可能会有一个与react select library相关的错误。您可能需要添加此属性来传递输入组件，如inputRenderer={（）=>}。但是如果你按照他的方式做，你需要有一个状态来跟踪输入的当前值，并花一些精力来设置它的样式。@Matthholland是的，我认为inputRenderer方法是有效的。当输入中有值时，我只需显式地隐藏占位符文本（否则它看起来是重叠的）：
占位符={！filterValue？占位符：null}
import React, { useState } from 'react'
import { default as ReactSelect } from "react-select";



function Select(props) {

    const [inputValue, setinputValue] = useState('')

    const onInputChange = (inputValue, event) => {
        if (event.action==='input-change'){
            setinputValue(inputValue)
        }  
    }
    
    return (
            <ReactSelect
                onInputChange={onInputChange}
                inputValue={inputValue}
            />
    )
}

export default Select