按钮上的切换图标单击 React

Question

我正在尝试在 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>

错误：无法在 "Node" 上执行 "remove child"。要删除的节点不是该节点的子节点。

Answer 1

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

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

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>

工作演示： 字体很棒

Answer 2

试试这个：

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

Answer 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>

按钮上的切换图标单击 React

Toggle Icon on Button click React

javascript

icons

toggle

reactjs

react-component