Question

我一直在愉快地使用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

正如您所看到的，如果您访问沙盒页面，当用户点击时，输入到选择中的任何文本都会消失。如果再次给予焦点，则重新出现。

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

如何使react-select保留输入的内容？它似乎在内部记住了值，但是当它不再具有焦点时隐藏文本输入。我认为将各种onFooResetsInput全部设置为false会实现此目的，但它还没有完成。

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

react-select版本：1.2.1（最新）
反应和反应版本：15 或16（均表现出这种行为）

Answer 1

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

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

修改

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

Answer 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

选择未聚焦时，React-Select输入内容消失

2 个答案: