单击后如何从选择菜单中将特定选项显示为灰色？

Question

I have a list of questions and I want a specific option to be greyed out when it has been clicked on. At the moment is greys out the whole select list when I click on it (which is not what I want). How to achieve this?

my dropdownmenu with select option:

    export function DropDownMenu(props) {

        let selectOption;

        if (props.questionOverviewList[props.index]) {
            selectOption = 
    props.questionOverviewList[props.index].map((item) =>
                <OptionList key={item._id} index={props.index} 
    question= . 
  {item.question}/>);
        }

        return <div className="panel panel-default">
            <div className="input-group mb-3">
                <div className="input-group-prepend">
                    <CategoryLabel title={props.categoryTitle}/>
                </div>
                <select className="custom-select" onClick={(e) => 
    e.target.disabled = true} 
                        onChange={(e) => . 
   props.selectedQuestionByTeamLeader(e.target.value)}>
                    <option></option>
                    {selectOption}
                </select>
            </div>
        </div>

    }

My option component:

    export default function OptionList(props) {

        return <option>{props.question}</option>

    }

Note that the option component is re-usable.

Answer 1

Here is possible solution which stores selected item _id into DropDownMenu state. You have to get back _id from the child option component by browsing HTML Select element options:

class DropDownMenu extends React.Component {

  constructor(props) {
    super(props);
    this.state = { selectedItemId: undefined };
  }

  optionSelected(selectElement) {
    let selectedOption;
    for (let option of selectElement.target.children) {
      if (option.value === selectElement.target.value) {
        selectedOption = option;
        break;
      }
    }

    this.setState({ selectedItemId: selectedOption.getAttribute('_id') });
    this.props.selectedQuestionByTeamLeader(selectedOption);
  }

  render() {
    const selectOption = this.props.questionOverviewList[this.props.index].map((item) => {
      console.log(this.state.selectedItemId === `${item._id}`);
      return <OptionList key={item._id} _id={item._id} index={this.props.index} question={item.question}
        grayedOut={this.state.selectedItemId === `${item._id}`} />
    });

    return <select className="custom-select" onChange={(e) => this.optionSelected(e)}>
      <option></option>
      {selectOption}
    </select>;
  }
}

Then disabled attribut based on OptionList grayedOut prop:

function OptionList(props) {
  return <option disabled={props.grayedOut} _id={props._id}>{props.question}</option>
}

This JSFiddle shows it's working!

https://jsfiddle.net/poyea78q/