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

【问题标题】：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>

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

【问题讨论】：

按钮图标是什么意思？

标签： javascript reactjs icons toggle react-component

【解决方案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>

【讨论】：