Учимся реагировать с игрой щелчка, onClick не будет стрелять. Я думаю, что я просто передаю реквизит * называется * onClick - PullRequest
Новая
       21

Учимся реагировать с игрой щелчка, onClick не будет стрелять. Я думаю, что я просто передаю реквизит * называется * onClick

0 голосов
/ 21 февраля 2020

Предполагается, что битовый компонент будет моим активируемым, что должно увеличивать состояние из-за моей функции mine в компоненте Mine. 

  function Bit(props) {
        return (
    <img src={logo} className="App-logo" alt="logo" onClick={props.onClick} />
  )
}
class Mine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bitCoins: 0,
      clickBonus: 1,
      cps: 1,
    }
  }
  mine() {
    alert('here')
    this.setState({
      bitCoins: this.state.bitCoins + 1
    })
    console.log(this.state.bitCoins);
  }
  render() {
    let status;
    status = this.state.bitCoins
    return (
          <div>
            <Bit onClick={() => this.mine()} />
          </div>
          <div className="text-primary">{status}</div>
    )
  }
}

1 Ответ

0 голосов
/ 21 февраля 2020

То, что возвращается из render в React, не может содержать элементы одного уровня на верхнем уровне. Так что просто оборачивая то, что вы возвращаете, <React.Fragment> (или div или что-то еще, что вы выбрали) исправили это.

Также обратите внимание, что setState является асинхронным, поэтому, когда вы console.log сразу после вызывая его, вы можете не получить самые последние значения. 

class Mine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bitCoins: 0,
      clickBonus: 1,
      cps: 1,
    }
  }
  
  mine() {
    alert('here')
    this.setState({
      bitCoins: this.state.bitCoins + 1
    })
    console.log(this.state.bitCoins);
  }
  
  render() {
    let status;
    status = this.state.bitCoins
    return (
      <React.Fragment>
        <div>
          <button onClick={() => this.mine()}>Mine</button>
        </div>
        <div className="text-primary">{status}</div>
      </React.Fragment>
    )
  }
}

ReactDOM.render(
  <Mine />,
  document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
...