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>