蚂蚁设计。更改事件的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= {

  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>

  )

};