处理按钮的提交事件：
处理了玩家入场的按钮与开始×××的按钮。
处理按钮提交事件。如果当前的操作没有问题，会打开metamask来进行事务提交。
同时要注意的是，增加了信息提示，即如果当前交易一直在等待矿工交易确认，那么，那么就会提示等待交易完成。当交易完成后，state状态改变、从新tijiaorender。
会提示交易完成。
src/App.js:
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
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:'',
message:''
}
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});
}
onSubmit = async event =>{
event.preventDefault();
const accounts = await web3.eth.getAccounts();
this.setState({message:'等待交易完成.....'});
await lottery.methods.enetr().send({from:accounts[0],value:web3.utils.toWei(this.state.value,'ether')});
this.setState({message:'入场成功.....'});
}
onClick = async ()=>{
const accounts = await web3.eth.getAccounts();
this.setState({message:'等待交易完成......'});
await lottery.methods.pickwiner().send({from:accounts[0]});
this.setState({message:'赢家产生'});
}
render() {
console.log(this.state.value);
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 onSubmit={this.onSubmit}>
<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 onClick={this.onClick}>开始×××</button>
<p>{this.state.message}</p>
</div>
);
}
}
export default App;
|
