时间戳

首页 > 解决方案 > React 如何在点击时更改组件图标外观？

javascript - React 如何在点击时更改组件图标外观？

问题描述

我有一个组件按钮，在按钮内部，我有一个组件图标，我正在尝试使用 useState 但它根本不影响父组件中的状态。我有一个主要组件标题，其中有标题和组件图标，我不会根据单击的按钮更改它们。例如，如果我单击带有主页图标的按钮 - 如果云将变为云等，则下一个标题标题图标将变为主页。

页眉.js

    import React from 'react';
    import Button from 'components/Button';

const Header = (props) => {
return(
<div>
<h4 className="title">
              <Icon name={props.titleIcon}/>
            Title
            </h4>
<div>
);
};

按钮.js

    import React,{useState} from 'react';
    import { Button } from 'semantic-ui-react';
    import { Icon } from 'semantic-ui-react';
    
    const Button = (props) => {
    const [icon, setIcon] = useState('home')
    
    const handleClick = ()
     => {
    setIcon(props.titleIcon = props.icon)
    };
    return(
     <div>
          <Button>
            <a href={props.link} target="_blank">
              <Icon name={props.icon}/>
    {props.name}
            </a>
          </Button>
        </div>
    );
    
    };

我如何才能实现更改图标的这种效果？

问候

标签： javascriptreactjs

解决方案

好吧，这个有很多错误：

  1. 你还没有实际使用过 handleClick 功能
  2. setIcon 函数参数被用作赋值。未使用实际值

正确的代码可能如下所示：

import React,{useState} from 'react';
import { Button } from 'semantic-ui-react';
import { Icon } from 'semantic-ui-react';

const Button = ({titleIcon, name, link}) => {
  const [icon, setIcon] = useState('home')

  const handleClick = () => {
    setIcon(titleIcon)
  };
  return(
      <div>
            <Button onClick={handleClick}>
              <a href={link} target="_blank">
                <Icon name={icon}/>
                  {name}
              </a>
        </Button>
      </div>
  );

};

推荐阅读