Question

当我单击按钮时，我希望我的代码执行if函数，但是无论我尝试执行什么，它什么都不做或对我抛出错误。有人知道这里可能有什么问题吗？

import React from 'react';
export default class MojaKlasa extends React.Component {
  state = {showPass: 0};

  render() {
    function MojaFunkcja() {
      if (this.state.showPass === 0) {
        this.setState([showPass: 1])
      } else {
        this.setState([showPass: 0])
      }
    };
    return (
      <button className="przycisk" onClick={() => MojaFunkcja()}></button>
      <p>{this.state.showPass}</p>
    );
  };
}

Answer 1

您可以进行以下操作：

export default class App extends React.Component {
  state = { showPass: 0 };

  MojaFunkcja = () => {
    this.setState({ showPass: (this.state.showPass === 1) ? 0 : 1 });
  };

  render() {
    return (
      <div>
        <button className="przycisk" onClick={this.MojaFunkcja} />
        <p>{this.state.showPass}</p>
      </div>
    );
  }
}

Answer 2

代码中有很多语法错误和问题...

从'react'导入React；

export default class App extends React.Component {
  state = { showPass: 0 };

  MojaFunkcja = () => {
    this.setState({ showPass: this.state.showPass + 1 });
  };

  render() {
    return (
      <div>
        <button className="przycisk" onClick={this.MojaFunkcja} />
        <p>{this.state.showPass}</p>
      </div>
    );
  }
}

Answer 3

我建议将showPass从int更改为boolean，这样您的生活会更轻松

import React from 'react';
export default class MojaKlasa extends React.Component {
  state = {
    showPass: false
  };
  render() {
    function MojaFunkcja() {
     this.setState({ showPass: !this.state.showPass })
    };
    return (
        <>
      <button className="przycisk" onClick={MojaFunkcja}></button>
      <p> {this.state.showPass}</p>
        </>
    );
  };
}

Answer 4

this.setState([showPass: 0])是无效的JavaScript语法。您必须使用{}而不是[]来创建对象文字：

this.setState({showPass: 0})

与其他setState通话相同。

您也不能像return (<button></button> <a />);这样两个元素。您必须返回元素的 array 或单个元素：

return [ // <- array literal
   <button />
   <a />
];

// or

return (
  <span> // <- parent node
    <button />
    <a />
  </span>
);

单击执行功能会出现错误

4 个答案: