Как выделить конкретную опцию из меню выбора при нажатии?

Question

У меня есть список вопросов, и я хочу, чтобы конкретная опция была выделена серым цветом при нажатии на нее. На данный момент, когда я щелкаю по нему, отображается весь список выбора (что я не хочу). Как этого добиться?

мое выпадающее меню с опцией выбора:

    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>

    }

Мой дополнительный компонент:

    export default function OptionList(props) {

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

    }

Обратите внимание, что компонент option можно использовать повторно.

Answer 1

Здесь возможно решение, которое сохраняет выбранный элемент _id в состояние DropDownMenu.Вы должны получить обратно _id от дочернего компонента option, просматривая HTML. Выберите опции элемента:

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

Затем отключите атрибут на основе OptionList grayedOut prop:

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

Это JSFiddle показываетэто работает!

https://jsfiddle.net/poyea78q/