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>

错误：无法在“节点”上执行“删除子项”。要删除的节点不是该节点的子节点。

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>)
}

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

2 个答案: