使用图像和说明来反应组合框选择

Question

我正在寻找一个组合框，以便每一行都有标题，描述和图像。我需要在关闭组合框时看到选择的行的标题和图像。

是否有图书馆的国王在做这样的事情？

我的项目是用React和TypeScript编写的。

我正在寻找这样的东西：

Answer 1

我有解决办法。我使用了'semantic-ui-react'的DropDown组件 我的代码如下：

export default class CPComboBoxWithIcon extends Dropdown {

constructor(props: any) {
    super(props);
    let pickedComboBox  = this.props.comboBoxContent.find((x: { isPicked?: any; })=>x.isPicked === true)
    this.setPickedComboBox(pickedComboBox.image.src , pickedComboBox.text)

    this.state = {
        sel_img: this.getPickedComboBox()
    };
}

pickedComboBox : any;

setPickedComboBox = (imgSrc:any , comboBoxText:string )=> {
    this.pickedComboBox  = (
        <span>
            <Image avatar src={imgSrc} size={"tiny"}/>  {comboBoxText}
         </span>
    )
}
getPickedComboBox =  ()=> {
    return this.pickedComboBox;
}

exposedCampaignOnChange = (e: any, {value}: any) => {
     let chosenComboBox  = this.props.comboBoxContent.find((x: { value: any; })=>x.value == value)
    this.setPickedComboBox(chosenComboBox.image.src, chosenComboBox.text);
    this.setState({
        sel_img: this.getPickedComboBox(),
    });
};


render() {
    return (
        <div>
            <Dropdown
                trigger={this.state.sel_img}
                fluid
                selection
                options={this.props.comboBoxContent}
                onChange={this.exposedCampaignOnChange}>
            </Dropdown>
        </div>
    )
}

}