选择带图标的选项，单击该图标将调用单独的功能并防止默认

Question

我从antd中选择了一个下拉列表来从列表中选择用户。我需要一个以他们名字为前缀的图标（最喜欢的），以便我能够收藏它们，以便它们出现在列表的顶部。单击名称应选择该选项，单击图标应调用API，不应选择该选项。如何防止该功能的默认？

https://imgur.com/sWXjrhm

<Select optionFilterProp='children' value={this.state.selectedUserId}
onSelect={this.handleChangeUser.bind(this)}
className='mb-10 w-100' 
>
    <Option value={'0'} key={'0'}>
        Choose User
    </Option>
    {this.state.userData && this.state.userData.length !== 0                                             
    ? this.state.userData.map(user => (                                                  
      <Option key={user.id.toString()} value={user.id}>                                                      
        <Icon                                                            
            type='star'
            theme={user.isFavorite ? 'filled' : 'outlined'}
            style={{
              margin: '4px 10px 0px 0px',
              color: user.isFavorite ? 'green' : '',
            }}
            onClick={() => this.handleChangeFavoriteUsers(user.id)}
        />
      {user.informal_name}
    </Option>
   ))
   : ''}
</Select>

图标点击处理程序

public async handleChangeFavoriteUsers(value: string) {
  // Call API to update the User and prevent default
}

Answer 1

通过更改为找到解决方案

onClick={(e) => this.handleChangeFavoriteUsers(user.id, e.stopPropagation())}