반응 선택 비활성화 옵션

반응 선택 비활성화 옵션

React Select 요소 내의 큰 목록에서 특정 옵션을 비활성화하는 데 문제가 있습니다.선택 항목에 로드되는 옵션은 약 6,500개입니다.처음에는 검색 기능이 느려지는 문제가 있었지만, 그 후 react-select-fast-filter-options를 사용하여 문제를 해결했습니다.문제는 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;

나는 픽 소품들을 걸러보고 그 옵션 변수를 포함하도록 변경해 보았다.disabled:true응용 프로그램이 지연되고 있습니다.리액트 셀렉트-패스트 필터 옵션을 사용하고 있기 때문에, 이 기능이 동작할 수 있을지 어떨지 모르겠습니다.인덱스화도 하고 있는 것 같기 때문입니다.옵션 var를 필터링하여 모든 선택 도구 인스턴스를 검색하여 해당 옵션을 신속하게 비활성화할 수 있는 방법이 있습니까?

isDisabled={this.props.disabled}

잘못된 소품을 전달하고 있습니다.v2의 경우 프로포트는 Disabled입니다.

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

react-select v2에서:

1. 옵션 배열에 속성 'disabled'(또는 비활성화된 옵션을 식별하기 위한 다른 쌍)를 추가합니다.

2. react-select 컴포넌트의 isOptionDisabled 소품을 사용하여 '비활성화' 속성을 기반으로 옵션을 필터링합니다.

다음은 예를 제시하겠습니다.

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>

}

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

사람들은 그것을 자바스크립트 문제로 만들고 있다.나는 그것을 CSS로 만들고 단순화하라고 말한다.이것을 사용하다

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

이렇게...2월은 28일밖에 없다.

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;

언급URL : https://stackoverflow.com/questions/48789307/react-select-disable-options