按钮上的切换图标单击反应

Posted 2023-02-18

【中文标题】按钮上的切换图标单击反应

【英文标题】：Toggle Icon on Button click React

【发布时间】：2020-10-03 02:15:45

【问题描述】：

我试图在 React 应用程序中单击时切换按钮图标。我查看了控制台，点击时“togglePassword”的值正在改变，但按钮图标没有改变......如何纠正这个问题？ 这是我的代码...

class Register extends Component 

    constructor() 
        super();
        this.state = 
            togglePassword: false
        ;

        this.onToggle = this.onToggle.bind(this);
    

    onToggle(e) 
      this.setState( togglePassword: !this.state.togglePassword )
    

    render() 
       return (
          <button onClick=this.onToggle type="button">
             
              this.state.togglePassword ? 
              <i className="fas fa-eye-slash"></i> : 
              <i className="fas fa-eye"></i>
             
          </button>
       );
    

我尝试的另一种方法如下，但是当我单击按钮时控制台给了我以下错误...

<button onClick=this.onToggle type="button">
           
            this.state.togglePassword &&
            (<i className="fas fa-eye-slash"></i>)
           
           
            !this.state.togglePassword &&
            (<i className="fas fa-eye"></i>)
                   
</button>

错误：未能在“节点”上执行“删除子节点”。要移除的节点不是该节点的子节点。

【问题讨论】：

按钮图标是什么意思？

【参考方案1】：

除了您提供的代码之外，可能还有其他内容，

在代码 sn-p 下方，这是您的代码的精确副本，并且工作正常：

---

class App extends React.Component 

    constructor() 
        super();
        this.state = 
            togglePassword: false
        ;

        this.onToggle = this.onToggle.bind(this);
    

    onToggle(e) 
      this.setState( togglePassword: !this.state.togglePassword )
    

    render() 
       return (
          <button onClick=this.onToggle type="button">
             
              this.state.togglePassword ? 
              "fa-eye-slash": 
              "fa-eye"
             
          </button>
       );
    


ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

工作演示：字体很棒

【讨论】：

我没有为我的按钮使用简单的文本，你已经这样做了。万一我们使用了一个很棒的字体图标，它就不起作用了……

任何其他方法和使用字体真棒图标？

我还是不明白。我的和你的代码都是一样的，有什么区别？？你能告诉我你做了什么吗？

我使用了他们网站的 font-awesome 官方 CDN，你做了什么？

@Smile001，我刚刚在网上找到了带有 font-awesome 的演示，并将您的代码放入其中，它的工作，没有别的，您可以创建一个与本地相同的演示，然后可能是我可以帮你更多

【参考方案2】：

试试这个：

 render() 
  const togglePassword = this.state
       return (
    <button onClick=this.onToggle type="button">
           <i className=`fas fa-eye$togglePassword?"-slash:""`></i>
     </button>)

【参考方案3】：

这似乎对我使用 React Material MUI 有效

import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ExpandLessIcon from '@mui/icons-material/ExpandLess';

...

const [anchorEl, setAnchorEl] = React.useState(null);

  const open = Boolean(anchorEl);
  const handleClick = (event) => 
    setAnchorEl(event.currentTarget);
  ;
  const handleClose = () => 
    setAnchorEl(null);
  ;

...

<Button id="fade-button"onClick=handleClick>
Text
anchorEl ? <ExpandLessIcon /> : <ExpandMoreIcon />
</Button>