蚂蚁设计。更改事件的twoToneColor

Question

我如何更改twoToneColor触发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>

  )

};

Answer 1

我决定在钩子的帮助下import React from 'react';import {DeleteTwoTone, WarningTwoTone, EditTwoTone} from '@ant-design/icons';const iconStyle = {fontSize: '18px'};const activeColors= {&nbsp; warn: '#ff9d52',&nbsp; delete: '#ff4d4f',&nbsp; edit: '#709cd9'};const defaultColors = {&nbsp; warn: '#d9d9d9',&nbsp; delete: '#d9d9d9',&nbsp; edit: '#d9d9d9'};export const Control = ({className, onClick}) => {&nbsp; const [colors, setColors] = React.useState(defaultColors);&nbsp; const mouseLeaveHandler = () => {&nbsp; &nbsp; setColors(defaultColors)&nbsp; };&nbsp; const mouseEnterHandler = (field) => {&nbsp; &nbsp; setColors(prev => {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; ...prev,&nbsp; &nbsp; &nbsp; &nbsp; [field]: activeColors[field]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; };&nbsp; return (&nbsp; &nbsp; <div className={className}>&nbsp; &nbsp; &nbsp; <WarningTwoTone&nbsp; &nbsp; &nbsp; &nbsp; twoToneColor={colors.warn}&nbsp; &nbsp; &nbsp; &nbsp; style={iconStyle}&nbsp; &nbsp; &nbsp; &nbsp; onMouseEnter={() => mouseEnterHandler('warn')}&nbsp; &nbsp; &nbsp; &nbsp; onMouseLeave={mouseLeaveHandler}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <EditTwoTone&nbsp; &nbsp; &nbsp; &nbsp; twoToneColor={colors.edit}&nbsp; &nbsp; &nbsp; &nbsp; onMouseEnter={() => mouseEnterHandler('edit')}&nbsp; &nbsp; &nbsp; &nbsp; onMouseLeave={mouseLeaveHandler}&nbsp; &nbsp; &nbsp; &nbsp; style={iconStyle}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; <DeleteTwoTone&nbsp; &nbsp; &nbsp; &nbsp; twoToneColor={colors.delete}&nbsp; &nbsp; &nbsp; &nbsp; style={iconStyle}&nbsp; &nbsp; &nbsp; &nbsp; onMouseEnter={() => mouseEnterHandler('delete')}&nbsp; &nbsp; &nbsp; &nbsp; onMouseLeave={mouseLeaveHandler}&nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; </div>&nbsp; )};