Как вы обновляете div с React? - PullRequest
Новая
       10

Как вы обновляете div с React?

0 голосов
/ 21 сентября 2018

В моем классе мы начали учиться использовать React, и у меня возникли небольшие проблемы с одним из начальных проектов.Мне просто нужно нажать кнопку, и этот номер появится на странице, очень простой симулятор броска кубика.Я могу сделать это в консоли, но не могу понять, как поместить переменную на страницу.

Код для App.js: 

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import './Diceroll';
import Diceroll from './Diceroll';

class App extends Component {
render() {
    return (
        <div>
             <Diceroll />

        </div>
    );
  }
}

export default App;

И мой Diceroll.js: 

import React, { Component } from 'react';

class Diceroll extends Component {

render() {
    return (
        <div>
        <button onClick={() => {this.dieroll()}}>Roll the 120 Die</button>


      </div>
    )
  }

dieroll() {
    var roll = Math.floor(Math.random() * 121);

    console.log(roll);
 }
}

export default Diceroll;

Да, бросок кубика должен быть от 1 до 120. Мы посмотрели кубик с наибольшим числом сторон, и первым результатом был куб с 120 сторонами.

1 Ответ

0 голосов
/ 21 сентября 2018

обновление Diceroll.js код ниже кода. 

import React, { Component } from "react";

class Diceroll extends Component {
  state = {
    roll: 0
  };
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.dieroll();
          }}
        >
          Roll the 120 Die
        </button>
        <br />
        <br />
        {this.state.roll}
      </div>
    );
  }

  dieroll() {
    var roll = Math.floor(Math.random() * 121);
    this.setState({ roll: roll });
    console.log(roll);
  }
}

export default Diceroll;

Вы можете использовать state, с помощью setState вы можете обновить и показать обновленный roll номер. нажмите здесь, чтобы узнать больше о состоянии 

class Diceroll extends React.Component {

  state = {
    roll: 0
  }

  render() {
    return ( <
      div >
      <
      button onClick = {
        () => {
          this.dieroll()
        }
      } > Roll the 120 Die < /button> <
      br / > < br / > {
        this.state.roll
      } <
      /div>
    )
  }

  dieroll() {
    var roll = Math.floor(Math.random() * 121);
    this.setState({
      roll: roll
    });
    console.log(roll);
  }
}

class App extends React.Component {
  render() {
    return ( <
      div >
      <
      Diceroll / >

      <
      /div>
    );
  }
}

ReactDOM.render( <
  App / > ,
  document.getElementById("root")
);
<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>
<div id="root"></div>
...