前台页面展示
在下面的展示中,展示了管理者的地址,当前参与者的数量、当前的资金池以及玩家入场按钮与判断输赢的按钮。将玩家列表、总资金、输入框信息都存储在了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;
|