在选择未聚焦时，反应选择输入内容消失答案

【问题标题】：React-Select input contents disappear when select is not focused在选择未聚焦时，反应选择输入内容消失
【发布时间】：2018-07-16 22:08:48
【问题描述】：

我一直在愉快地使用 react-select，但是在组件的Creatable 版本方面遇到了问题。

这是我的代码：

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>
);

我还在这里创建了一个可运行的版本：https://codesandbox.io/s/q27lnon96

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

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

如何让 react-select 保留输入的内容？似乎它在内部记住了该值，但是当它不再具有焦点时隐藏了文本输入。我认为将各种 onFooResetsInput 全部设置为 false 可以实现这一点，但它并没有完全奏效。

我的应用程序正在使用输入到此输入中的文本值来影响 UI 的其他元素，因此在隐藏文本时它看起来不同步。

react-select 版本：1.2.1（最新）
react 和 react-dom 版本：15 或 16 个（都表现出这种行为）

【问题讨论】：

标签： javascript reactjs react-select

【解决方案1】：

您需要处理 onChange 事件并让 selectedItems 成为组件状态的一部分。在你的情况下 selectedItems 永远不会改变。

看看https://codesandbox.io/s/pyo17y6qv7

编辑

是的，它适用于 inputRenderer。函数的默认参数将值传递给输入（这就是输入值消失的原因，因为当它是 onBlur 时，它会将值 '' 传递给输入。可能是 react-select 上的一个错误，因为我们有 onBlurResetsInput 标志 false）所以我们需要在将其传递给我们自己的输入之前将其删除。更新了https://codesandbox.io/s/54on0mr984上的代码

【讨论】：

谢谢，但这仍然存在问题。我的问题不在于选择项，而在于文本框的内容（用于过滤下拉列表中选项的字符串 - 在我的示例中为文本“两个”）。抱歉，如果我的 GIF 中不清楚。我已经编辑了这个问题，希望让它更清楚一点。
是的，我刚刚意识到我读到了你的问题，哈哈。如果 onBlurResetsInput = false 不起作用，我认为可能存在与 react-select 库相关的错误。您可能需要添加此属性来传递您的输入组件，例如 inputRenderer={() => }。但是如果你按照他的方式去做，你需要有一个状态来跟踪输入的当前值是什么，并且还要花一些精力来设置它的样式。
@MattHolland 是的，我认为 inputRenderer 方法有效
当输入中有值时，我只需要显式隐藏占位符文本（否则会出现叠加）：placeholder={!filterValue ? placeholder : null}

【解决方案2】：

对于仍然对 react-select version2 的解决方案感兴趣的任何人。

以下解决方案适用于 react-select v2。

文档 - https://react-select.com/upgrade-guide#concepts

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

【讨论】：