Reaccionar Seleccionar opciones de desactivación

Tengo problemas para deshabilitar ciertas opciones dentro de una lista grande dentro de un elemento React Select. Tengo alrededor de 6500 opciones que se cargan en la selección. Al principio tenía problemas con el retraso de la funcionalidad de búsqueda, pero luego comencé a usar las opciones de filtro rápido de selección de reacción que se encargaron de ese problema. Ahora el problema es que necesito deshabilitar ciertas opciones dependiendo de las “selecciones” de propType. Aquí está el código:

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;

He intentado filtrar a través de los accesorios de selección y cambiar esa variable de opciones para incluir disabled:true pero esto retrasa la aplicación y no estoy seguro de si funcionará ahora que estoy usando las opciones de filtro rápido de selección de reacción, ya que parece estar haciendo algún tipo de indexación. ¿Hay alguna manera de filtrar a través de las opciones var para encontrar todas las instancias del accesorio de selección y deshabilitar esas opciones rápidamente?

isDisabled={this.props.disabled}

Estás pasando una propiedad incorrecta. Para v2, la propiedad está deshabilitada.

https://github.com/JedWatson/react-select/issues/145

En reaccionar-seleccionar v2:

1. agregue a su conjunto de opciones una propiedad ‘deshabilitada’: ‘sí’ (o cualquier otro par para identificar las opciones deshabilitadas)

2. use accesorios isOptionDisabled del componente react-select para filtrar opciones basadas en la propiedad ‘deshabilitada’

Aquí hay un ejemplo:

import Select from 'react-select';

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

render() {

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

}

Más información sobre accesorios de reacción-selección está en el documentos y aquí hay un ejemplo hacen referencia.

use lo siguiente para deshabilitar una opción.

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>
  )
}

La gente lo está convirtiendo en un problema de JavaScript. Digo que sea un CSS y simplifique. Utilizar esta

style={{display: month === '2' ? 'none' : 'block'}} 

Así… Sólo hay 28 días en febrero

const ComponentName =() => {

  const [month, setMonth] = useState("")
  const [day, setDay] = useState("")


return (
<>
<select 
onChange={(e) => {
    const selectedMonth = e.target.value;
    setMonth(selectedMonth)> 
   <option selected disabled>Month</option>
   <option value="1">January</option>
   <option value="2">February</option>
</select>

<select
onChange={(e) => {
    const selectedDay = e.target.value;
    setDay(selectedDay)> 
   <option selected disabled>Day</option>
   <option value="28">28</option>
   <option value="29" style={{display: month === '2' ? 'none' : 'block'}}>29</option>
   <option value="30">30</option>
</select>

</>
)

}

export default ComponentName;