第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

螞蟻設(shè)計。更改事件的twoToneColor

螞蟻設(shè)計。更改事件的twoToneColor

HUX布斯 2023-09-14 20:36:45
我如何更改twoToneColor觸發(fā)AntDesign IcononMouseEnterEvent 的時間import React from 'react';import {DeleteTwoTone, WarningTwoTone, EditTwoTone} from '@ant-design/icons';const iconStyle = {fontSize: '18px'};const defaultColor = '#d9d9d9';export const Control = ({className, onClick}) => {  let warnColor = defaultColor;  let deleteColor = defaultColor;  // does not work  const onHover = (target) => {    switch (target) {      case 'warn':        warnColor = '#ffe58f';        return;      case 'delete':        deleteColor = '#ff4d4f';        return;    }  };  return (    <div className={className}>      <WarningTwoTone        twoToneColor={warnColor}        style={iconStyle}        onMouseEnter={() => onHover('warn')}      />      <EditTwoTone        twoToneColor="#d9d9d9"        style={iconStyle}      />      <DeleteTwoTone        twoToneColor={deleteColor}        style={iconStyle}        onMouseEnter={() => onHover('delete')}      />    </div>  )};
查看完整描述

1 回答

?
侃侃爾雅

TA貢獻1801條經(jīng)驗 獲得超16個贊

我決定在鉤子的幫助下


import React from 'react';

import {DeleteTwoTone, WarningTwoTone, EditTwoTone} from '@ant-design/icons';


const iconStyle = {fontSize: '18px'};


const activeColors= {

  warn: '#ff9d52',

  delete: '#ff4d4f',

  edit: '#709cd9'

};


const defaultColors = {

  warn: '#d9d9d9',

  delete: '#d9d9d9',

  edit: '#d9d9d9'

};


export const Control = ({className, onClick}) => {


  const [colors, setColors] = React.useState(defaultColors);


  const mouseLeaveHandler = () => {

    setColors(defaultColors)

  };


  const mouseEnterHandler = (field) => {

    setColors(prev => {

      return {

        ...prev,

        [field]: activeColors[field]

      }

    })

  };


  return (

    <div className={className}>

      <WarningTwoTone

        twoToneColor={colors.warn}

        style={iconStyle}

        onMouseEnter={() => mouseEnterHandler('warn')}

        onMouseLeave={mouseLeaveHandler}

      />

      <EditTwoTone

        twoToneColor={colors.edit}

        onMouseEnter={() => mouseEnterHandler('edit')}

        onMouseLeave={mouseLeaveHandler}

        style={iconStyle}

      />

      <DeleteTwoTone

        twoToneColor={colors.delete}

        style={iconStyle}

        onMouseEnter={() => mouseEnterHandler('delete')}

        onMouseLeave={mouseLeaveHandler}

      />

    </div>

  )

};


查看完整回答
反對 回復(fù) 2023-09-14
  • 1 回答
  • 0 關(guān)注
  • 126 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號