以太坊DAPP[5]-博彩-事件处理

处理按钮的提交事件:

处理了玩家入场的按钮与开始博彩的按钮。
处理按钮提交事件。如果当前的操作没有问题,会打开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(web3.version);
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;