反应选择禁用选项 [英] React Select disable options
问题描述
我在禁用 React Select 元素的大列表中的某些选项时遇到问题.我有大约 6,500 个选项可以加载到选择中.起初我遇到了搜索功能滞后的问题,但后来我开始使用 react-select-fast-filter-options 来解决这个问题.现在的问题是我需要根据 propType选择"禁用某些选项.代码如下:
import React, {Component} from 'react'从 'prop-types' 导入 PropTypes;导入'反应选择/dist/react-select.css'导入反应虚拟化/styles.css"导入反应虚拟化选择/styles.css"导入从反应虚拟化选择"中选择从 'react-select-fast-filter-options' 导入 createFilterOptions;让选项 = [];如果(股票搜索股票的类型!== '未定义'){//通过放置静态js var从后端加载所有可用选项选项 = stockSearchStocks}const filterOptions = createFilterOptions({options});类 StockSearch 扩展组件 {静态 propTypes = {交换:PropTypes.array.isRequired,onSelectChange: PropTypes.func.isRequired,搜索禁用:PropTypes.bool.isRequired,选择:PropTypes.array.isRequired,stock_edit_to_show:PropTypes.number}/*** 组件桥接功能* @param stock_id 数据库中的股票id*/stockSearchChange = (stock_id) =>{this.props.onSelectChange(stock_id);}//这至少是我目前的尝试//禁用组件安装选项,但这似乎不起作用componentWillMount = () =>{console.log('picks!:' + JSON.stringify(this.props.picks));让 pickIDs = this.props.picks.map((p) => p.stock_id);options = options.map((o) => {//console.log(pickIDs.indexOf(o.value));如果(pickIDs.indexOf(o.value)){//console.log('这里是选项:' + JSON.stringify(o));//console.log('这里是选项:' + o.disabled);o.disabled = true;}})}/*** 处理从股票选择中选择的选项* @param selectedOption*/handleSelect = (selectedOption) =>{this.stockSearchChange(selectedOption.value);}使成为() {返回 (<div className="stock-search-container"><选择名称=股票搜索"选项={选项}placeholder="在此处输入或选择一只股票..."onChange={this.handleSelect}禁用={this.props.searchDisabled}值={this.props.stock_edit_to_show}filterOptions={filterOptions}/>
)}}导出默认 StockSearch;
我已经尝试通过选择道具过滤并更改该选项变量以包含 disabled:true
但这会滞后应用程序,我不确定现在我正在使用 react 是否可行-select-fast-filter-options 因为它似乎在做某种索引.有没有办法过滤选项 var 以找到所有 picks 道具的实例并快速禁用这些选项?
isDisabled={this.props.disabled}
您传递了错误的道具.对于 v2,道具已禁用.
https://github.com/JedWatson/react-select/issues/145
I'm having issues disabling certain options within a large list within a React Select element. I have around 6,500 options that get loaded into the select. At first I was having issues with the search functionality lagging but then I started using react-select-fast-filter-options which took care of that problem. Now the issue is that I need to disable certain options depending on the propType "picks". Here is the code:
import React, {Component} from 'react'
import PropTypes from 'prop-types';
import 'react-select/dist/react-select.css'
import 'react-virtualized/styles.css'
import 'react-virtualized-select/styles.css'
import Select from 'react-virtualized-select'
import createFilterOptions from 'react-select-fast-filter-options';
let options = [];
if(typeof stockSearchStocks !== 'undefined') {
//loads in all available options from backend by laying down a static js var
options = stockSearchStocks
}
const filterOptions = createFilterOptions({options});
class StockSearch extends Component {
static propTypes = {
exchanges: PropTypes.array.isRequired,
onSelectChange: PropTypes.func.isRequired,
searchDisabled: PropTypes.bool.isRequired,
picks: PropTypes.array.isRequired,
stock_edit_to_show: PropTypes.number
}
/**
* Component Bridge Function
* @param stock_id stocks id in the database
*/
stockSearchChange = (stock_id) => {
this.props.onSelectChange(stock_id);
}
//this is my current attempt to at least
//disable options on component mount but this doesn't seem to be working
componentWillMount = () => {
console.log('picks!: ' + JSON.stringify(this.props.picks));
let pickIDs = this.props.picks.map((p) => p.stock_id);
options = options.map((o) => {
// console.log(pickIDs.indexOf(o.value));
if(pickIDs.indexOf(o.value)) {
// console.log('here is the option: ' + JSON.stringify(o));
// console.log('here is the option: ' + o.disabled);
o.disabled = true;
}
})
}
/**
* handles selected option from the stock select
* @param selectedOption
*/
handleSelect = (selectedOption) => {
this.stockSearchChange(selectedOption.value);
}
render() {
return (
<div className="stock-search-container">
<Select
name="stock-search"
options={options}
placeholder="Type or select a stock here..."
onChange={this.handleSelect}
disabled={this.props.searchDisabled}
value={this.props.stock_edit_to_show}
filterOptions={filterOptions}
/>
</div>
)
}
}
export default StockSearch;
I have tried filtering through the picks props and changing that options variable to include disabled:true
but this lags the application and I'm not sure if that will work now that I'm using react-select-fast-filter-options as it seems to be doing some sort of indexing. Is there a way to filter through the options var to find all instances of the picks prop and disable those options quickly?
isDisabled={this.props.disabled}
You are passing a wrong prop.. For v2, the prop is isDisabled.
https://github.com/JedWatson/react-select/issues/145
这篇关于反应选择禁用选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!