Question

我正在尝试获取按钮以在条件函数中随机返回警报。但是，它不会循环通过，因此每次单击都会返回相同的警报。仅当代码重新运行（页面刷新）时，它才会变化。我想念什么？

const headsOrTails = Math.random() < 0.5;

class Button extends React.Component {

condition() {
  if (headsOrTails === true) {
    alert ('Going Out!');
  } else {
    alert ('ChillZone');
  }
}

render() {
  return 
    <button className="button" onClick={this.condition}>
     WHAT SHOULD WE DO TONIGHT?
    </button>;
 }
}

Answer 1

这是因为您的const headsOrTails = Math.random() < 0.5;语句执行一次。要使其正常工作，您可以将其包装到一个函数中，然后调用它而不是headsOrTails === true：

const headsOrTails = () => (Math.random() < 0.5);

class Button extends React.Component {

  condition() {
    if (headsOrTails()) {
      alert ('Going Out!');
    } else {
      alert ('ChillZone');
    }
  }

  render() {
    return (
      <button className="button" onClick={this.condition}>
        WHAT SHOULD WE DO TONIGHT?
      </button>
    );
  }
}

ReactDOM.render(<Button />, document.getElementById('root'));

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

Answer 2

我认为您的问题可能是您设置了一次硬币翻转。尝试添加一个函数来调用coinflip并在该函数上运行条件。

React / onClick函数不会通过if / else循环

2 个答案: