以太坊DAPP[3]-×××-react特性与×××合约实例
2018-12-14 20:48
836 查看
×××实例
在之前的课程中,我们介绍了如何编译与部署合约。现在,我们假设已经把合约部署到了ropsten的网络之上。得到了地址。
现在,我们需要通过合约的ABI接口与地址来构建×××合约的实例。
新建文件:src/lottery.js:
1 2 3 4 5 6 7 | import web3 from './web3'; const address = '0x94A261B507c4388f2ADcFfaA5685ffdF53ebcba5'; const abi = [{"constant":true,"inputs":[],"name":"manager","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"getPlayers","outputs":[{"name":"","type":"address[]"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"enetr","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[],"name":"pickwiner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"players","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"}]; export default new web3.eth.Contract(abi,address); |
src/App.js:
componentDidMount为react class的生命周期函数,其在reander之后执行。state是react中特殊的属性,其只是存在于class component中,用于存储属性。
当state中的状态变化之后,都会重新的执行reander函数,从而让页面展现出不同的效果。下面获取了管理者的地址并存储在了state状态变量中。在页面中显示了管理者的地址。
1 2 3 4 5 6 78 | 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:'', } async componentDidMount(){ const manager = await lottery.methods.manager().call(); this.setState({manager}); } render() { return ( <div> <h1>lottery管理者地址:</h1> <p>this is manager by {this.state.manager}</p> </div> ); } } export default App; |
本文链接: https://dreamerjonson.com/2018/12/02/solidity-62-lottery-project-react-state-manager/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY 4.0 CN协议 许可协议。转载请注明出处!
相关文章推荐
- JVM高级特性与实践(五):实例探究Class类文件 及 常量池
- 匿名方法,委托,特性和事件实例复习
- Silverlight 5 beta新特性探索系列:2.在XAML代码中设置断点和Binding绑定调试【附带源码实例】
- React 入门实例教程
- Spring-data-redis:特性与实例
- Spring事务传播特性实例解析(转)
- 开始一个React项目(四)路由实例(v4)
- JavaScript 学习笔记十四 this特性,静态方法 和实例方法,prototype
- 2015年最热门前端框架React 入门实例教程
- React 入门实例教程(原作者: 阮一峰)
- HTML5新特性之dataset实例
- C++ 0X 新特性实例(比较常用的) (转)
- React 入门实例教程
- react.js 渲染一个列表的实例
- Java SE 7新特性:创建泛型实例时自动类型推断
- 一个实例介绍C++复制控制(有一个C++11新特性要注意)——复制构造函数、赋值操作符、析构函数
- webpack+react+antd 单页面应用实例
- Python的高级特性8:你真的了解类,对象,实例,方法吗
- 11g新特性:hangdiag.sql实例hang诊断脚本
- React简单实例