Javascript 在“反应选择”中禁用聚焦于第一个选项
我在React Select中有一个下拉列表,我正面临一个焦点问题。每当我们打开下拉列表时,选项列表中的第一项就是聚焦。有两个道具可以通过,但没有一个用于禁用此功能。我在他们的github中看到了与自动对焦相关的问题。但道具仍然没有添加到他们的包中。 我试过使用聚焦道具,但没有达到预期效果。 这是我选择下拉列表的代码Javascript 在“反应选择”中禁用聚焦于第一个选项,javascript,reactjs,react-select,Javascript,Reactjs,React Select,我在React Select中有一个下拉列表,我正面临一个焦点问题。每当我们打开下拉列表时,选项列表中的第一项就是聚焦。有两个道具可以通过,但没有一个用于禁用此功能。我在他们的github中看到了与自动对焦相关的问题。但道具仍然没有添加到他们的包中。 我试过使用聚焦道具,但没有达到预期效果。 这是我选择下拉列表的代码 <Select className="profile-module-select-container" classNamePrefi
<Select
className="profile-module-select-container"
classNamePrefix="profile-module-select"
defaultValue={{value: 0, label: 0}}
options={options}
openMenuOnFocus={false}
autoFocus={options.isFocused}
styles={styles}
onChange={selected => {
this.setState({
optionSelect: selected.value
}, () => {onChange(this.state.optionSelect, formKey)});
}}
onMenuOpen={(e, i, o) => {
this.setState({
selectMenuOpen: true
});
}}
onMenuClose={() => {
this.setState({
selectMenuOpen: false
});
}}
components={
{
IndicatorSeparator:() => null,
DropdownIndicator: DropdownCaret,
Placeholder: CustomPlaceholder,
Option: CustomOptionComponent
}
}
placeholder={placeholder}
isSearchable={false}
isClearable={false}
name={name}
value={options.filter(option => {return option.value === value})}
/>
{
这是我的国家({
选项选择:已选择。值
},()=>{onChange(this.state.optionSelect,formKey)});
}}
onMenuOpen={(e,i,o)=>{
这是我的国家({
选择菜单打开:true
});
}}
onMenuClose={()=>{
这是我的国家({
选择菜单打开:false
});
}}
组成部分={
{
指示符分隔符:()=>空,
下拉指示器:下拉插入符号,
占位符:自定义占位符,
选项:自定义选项组件
}
}
占位符={占位符}
isSearchable={false}
isClearable={false}
name={name}
value={options.filter(option=>{return option.value===value})
/>
我在github上查看了他们的问题跟踪程序后,终于找到了上述问题的答案。道具尚未合并到其主要分支中。在此之前,如果有人试图在未来找到解决方案,这里是解决办法。
因此,在输入更改时,必须在传递给焦点列表中的下一项的函数上返回null
<Select
ref={ref => {
this.selectRef = ref;
}}
onInputChange={(value) => {this.selectRef.select.getNextFocusedOption = () => null }}
/>
{
this.selectRef=ref;
}}
onInputChange={(值)=>{this.selectRef.select.GetNextFocuseOption=()=>null}
/>
对于功能组件和类型脚本,实现@tkamath99的解决方案,如下所示:
<Select
ref={selectRef}
onInputChange={value => {
selectRef.current.select.getNextFocusedOption = () => false;
}}
/>
{
selectRef.current.select.getNextFocusedOption=()=>false;
}}
/>