Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 反应选择禁用选项_Javascript_Reactjs - Fatal编程技术网

Javascript 反应选择禁用选项

Javascript 反应选择禁用选项,javascript,reactjs,Javascript,Reactjs,我在React Select元素的大列表中禁用某些选项时遇到问题。我有大约6500个选项加载到select中。起初,我的搜索功能滞后,但后来我开始使用反应选择快速过滤器选项,解决了这个问题。现在的问题是,我需要根据propType选择禁用某些选项。代码如下: import React, {Component} from 'react' import PropTypes from 'prop-types'; import 'react-select/dist/react-select.css' i

我在React Select元素的大列表中禁用某些选项时遇到问题。我有大约6500个选项加载到select中。起初,我的搜索功能滞后,但后来我开始使用反应选择快速过滤器选项,解决了这个问题。现在的问题是,我需要根据propType选择禁用某些选项。代码如下:

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道具,并将该选项变量更改为包含disabled:true,但这会滞后于应用程序,我不确定这是否会起作用,因为我正在使用react select fast filter选项,因为它似乎在做某种索引。有没有一种方法可以过滤options变量以查找picks属性的所有实例并快速禁用这些选项

isDisabled={this.props.disabled}
你传错道具了。。对于v2,道具被禁用

在react select v2中:

1向选项数组中添加属性“disabled”:“yes”或任何其他对,以标识禁用的选项

2使用react select组件的isOptionDisabled道具根据“disabled”属性筛选选项

下面是一个例子:

import Select from 'react-select';

const options = [
{label: "one", value: 1, disabled: 'yes'},
{label: "two", value: 2]

render() {

 <Select id={'dropdown'}
         options={options}
         isOptionDisabled={(option) => option.disabled === 'yes'}>
 </Select>

}

有关react select道具的更多信息,请参阅,这里是它们的参考。

使用以下选项禁用选项

import Select from 'react-select';

render() {
  const options = [
    {label: "a", value: "a", isDisabled: true},
    {label: "b", value: "b"}
  ];

  return (
    <Select
      name="myselect"
      options={options}
    </Select>
  )
}

在当前版本的react select中,密钥是禁用的,而不是禁用的。为什么没有在任何地方记录这一点?