Question

在我的课堂上，我们开始学习如何使用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面的模具。

Answer 1

在代码下面更新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号。 click here to learn more about state

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>

如何使用React更新div？

1 个答案: