271-react合约交互

react合约交互







我们创建三个文件夹,对js文件进行一个管理
1.display	
	display.js
2.eth
	interaction.js
	loadInstance.js
3.utils	
	getWeb3.js




首先,我们把web3分离到getWeb3.js里面

getWeb3.js文件
//web3
let Web3 = require('web3')
let web3 = new Web3('http://127.0.0.1:7545')
console.log(web3.version)

module.exports = web3

这样就导出了
然后我们在其他文件导入就行了

let web3 = require('./utils/getWeb3')





然后我们把一些值做一个简单的展示

import React, {Component} from 'react';

let lotteryInstance = require('./eth/loadInstance')

class App extends Component {

    //react状态变量,可以负责类内的
    state = {
        manager: '',
        winner: '',
        players: [],
        round: 0,
    }

    //生命周期函数
    async componentWillMount() {

        let manager = await lotteryInstance.methods.manager().call()
        let winner = await lotteryInstance.methods.winner().call()
        let players = await lotteryInstance.methods.getPlayers().call()
        let round = await lotteryInstance.methods.round().call()


        //给状态变量赋值
        this.setState({
            manager: manager,
            winner: winner,
            players: players,
            round: round,
        })

    }

    //render渲染
    render() {
        return (
            <div>
                <p>hello world</p>
                <p>你好 世界</p>
                <p>manager: {this.state.manager}</p>
                <p>winner: {this.state.winner}</p>
                <p>players: {this.state.players}</p>
                <p>round: {this.state.round}</p>
            </div>
        );
    }
}

export default App;







我们需要修改一下web3
打开getWeb3.js文件
let Web3 = require('web3')
let provider = window.web3.currentProvider
let web3 = new Web3(provider)

module.exports=web3






然后我们增加一下按钮逻辑
render(){

let {manager,winner,round,balance,playerCount} = this.state

return(
<div>
	<ButtonExampleAnimated
	play={this.play}
	/>
</div>
)

}


然后我们在按钮上添加事件
<Button onClick={props.play}>
</Button>