我在React Select元素的大列表中禁用某些选项时遇到问题。我有大约6个,500个选项被加载到Select中。一开始我有搜索功能滞后的问题,但后来我开始使用react-select-fast-filter-options来解决这个问题。现在的问题是我需要根据propType "picks"禁用某些选项。下面是代码:
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;
我试过过滤picks props并修改options变量以包含disabled:true
,但这会延迟应用程序,而且我不确定现在是否可以工作,因为我使用react-select-fast-filter-options,因为它似乎在做某种索引。有没有办法过滤options var以找到picks prop的所有示例并快速禁用这些选项?
4条答案
按热度按时间a0zr77ik1#
您传递了错误的属性。对于v2,该属性为isDisabled。
https://github.com/JedWatson/react-select/issues/145
bvjxkvbb2#
在React选择v2中:
1.将属性"disabled"添加到选项数组中:"yes"(或任何其他配对,以标识禁用的选项)
1.使用react-select组件的isOptionDisabled属性根据"disabled"属性筛选选项
下面是一个例子:
更多关于React选择 prop 的信息在文档中,这里有一个他们参考的例子。
0x6upsns3#
使用以下命令禁用选项。
c9x0cxw04#
人们把它变成了一个JavaScript问题。我建议把它变成一个CSS问题并简化它。使用这个
像这样...二月只有28天