[英]React-Select input contents disappear when select is not focused
我已经愉快地使用 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
如您所见,如果您访问 Sandbox 页面,当用户单击离开时,任何输入到选择中的文本都会消失。 如果选择再次获得焦点,它会重新出现。
明确地说,我的问题是关于输入到输入中的文本“二” - 这不是所选值的问题(如果配置了正确的状态和回调,这些工作正常)。
如何让 react-select 保留输入的内容? 它似乎在内部记住该值,但在不再具有焦点时隐藏文本输入。 我认为将各种onFooResetsInput
全部设置为 false 可以实现这一点,但它并没有完全奏效。
我的应用程序正在使用输入到此输入中的文本值来影响 UI 的其他元素,因此当文本被隐藏时,它会显得不同步。
您需要处理 onChange 事件并使 selectedItems 成为组件状态的一部分。 在你的情况下 selectedItems 永远不会改变。
看看https://codesandbox.io/s/pyo17y6qv7
编辑
是的,它适用于 inputRenderer。 函数的默认参数将值传递给输入(这就是输入值消失的原因,因为当它处于 onBlur 时,它会将值 '' 传递给输入。可能是 react-select 上的一个错误,因为我们有 onBlurResetsInput 标志为 false)所以我们需要在将其传递给我们自己的输入之前将其删除。 更新了https://codesandbox.io/s/54on0mr984 上的代码
对于仍然对react-select version2 的解决方案感兴趣的任何人。
以下解决方案适用于react-select v2 。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.