Блог

У меня есть выпадающий список выбора из 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 amp;amp; 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
}
  

Нашел решение, изменив на

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