前台页面展示
在下面的展示中，展示了管理者的地址，当前参与者的数量、当前的资金池以及玩家入场按钮与判断输赢的按钮。将玩家列表、总资金、输入框信息都存储在了state状态变量中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import web3 from './web3';
import lottery from './lottery';
class App extends Component {
state = {
manager:'',
players:[],
balance:'',
value:'',
}
async componentDidMount(){
const manager = await lottery.methods.manager().call();
const players = await lottery.methods.getPlayers().call();
const balance = await web3.eth.getBalance(lottery.options.address);
this.setState({manager,players,balance});
}
render() {
return (
<div>
<h1>lottery管理者地址：</h1>
<p>this is manager by {this.state.manager}</p>
<p>当前的参与者的数量： {this.state.players.length}</p>
<p>当前资金池：{web3.utils.fromWei(this.state.balance,'ether')} ether</p>
<hr/>
<form>
<h4>参与到×××项目？</h4>
<div>
<label>你想参与的金额：</label>
<input
value={this.state.value}
onChange={event=>{this.setState({value:event.target.value})}}
/>
</div>
<button>提交</button>
</form>
<hr/>
<h4>判断输赢</h4>
<button>开始×××</button>
<p>{this.state.message}</p>
</div>
);
}
}
export default App;
|
