javascript - 如何在单击时使选择菜单中的特定选项变灰？

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>

    }

请注意，选项组件是可重复使用的。

Answer 1

这是可能的解决方案，将所选项目 _id 存储到 DropDownMenu 状态。您必须通过浏览 HTML Select 元素选项从子选项组件中获取 _id:

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 属性禁用属性:

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

这个 JSFiddle 显示它正在工作!

https://jsfiddle.net/poyea78q/