Dapp 眾籌專案（5）

1.對三個子界面的實作

---所有的眾籌專案---我創建的眾籌專案---我參加的眾籌專案

import React,{Component} from "react";
import {getFundingDetails}from '../../eth/interaction'
import CardList from "../common/CardList";
class AllFundingTab extends Component{
    state ={
        allFundingDetails :[],
    }
    //在componentWillMount方法中獲取我發起的眾籌，并設定到state中，
    async componentWillMount() {
        let allFundingDetails=await getFundingDetails(1)
        console.table('1',allFundingDetails)
        this.setState({
            allFundingDetails
        })
    }
//在render方法中從state獲取資料，
    render(){
        return(
            <CardList details={this.state.allFundingDetails}/>
        )
    }
}
export default AllFundingTab

三個界面所實作的功能是一樣的，所以復制黏貼并更改獲取不同功能的函式

現在我們來看看結果吧！！！

2.搭建發起眾籌表單

代碼使用到了semantic-ui的form組件，具體可以參考：https://react.semantic-ui.com/collections/form/

import React, {Component} from 'react';
import {Dimmer, Form, Label, Loader, Segment} from 'semantic-ui-react'
//import {createFunding} from "../eth/interaction";
class CreateFundingForm extends Component {
    // 定義狀態變數
    state = {
        active: false,
        projectName: '',
        supportMoney: '',
        targetMoney: '',
        duration: '',
    }

    render() {
        let {active, projectName, targetMoney, supportMoney, duration} = this.state

        return (
            <div>
                <Dimmer.Dimmable as={Segment} dimmed={active}>
                    <Dimmer active={active} inverted>
                        <Loader>Loading</Loader>
                    </Dimmer>
                    <Form onSubmit={this.handleCreate}>
                        <Form.Input required type='text' placeholder='專案名稱' name='projectName'
                                    value={projectName} label='專案名稱:'
                                    onChange={this.handleChange}/>

                        <Form.Input required type='text' placeholder='支持金額' name='supportMoney'
                                    value={supportMoney} label='支持金額:'
                                    labelPosition='left'
                                    onChange={this.handleChange}>
                            <Label basic>￥</Label>
                            <input/>
                        </Form.Input>

                        <Form.Input required type='text' placeholder='目標金額' name='targetMoney' value={targetMoney}
                                    label='目標金額:'
                                    labelPosition='left'
                                    onChange={this.handleChange}>
                            <Label basic>￥</Label>
                            <input/>
                        </Form.Input>
                        <Form.Input required type='text' placeholder='眾籌時間' name='duration' value={duration}
                                    label='眾籌時間:'
                                    labelPosition='left'
                                    onChange={this.handleChange}>
                            <Label basic>S</Label>
                            <input/>
                        </Form.Input>
                        <Form.Button primary content='創建眾籌'/>
                    </Form>
                </Dimmer.Dimmable>
            </div>
        )
    }
}

export default CreateFundingForm

查看頁面結果：

3.與from表單互動

定義表單項的onchange事件函式，該函式把表單項的值設定到狀態變數中

handleChange =(e,{name,value}) =>this.setState({[name]:value})

然后寫一個函式來看看是否觸發了按鈕：

handleCreate = () =>{
let {active,projectName,targetMoney,supportMoney,duration} =this.state
console.log('projectName:',projectName)
console.log('targetMoney:',supportMoney)
}

看看結果吧！！

4.與以太坊進行互動

定義表單提交函式

handleCreate = async() =>{
let {active,projectName,targetMoney,supportMoney,duration} =this.state
console.log('projectName:',projectName)
console.log('targetMoney:',supportMoney)
this.setState({active:true})
try {
let res= await createFunding(projectName, targetMoney, supportMoney, duration)
alert('創建合約成功！\n')
this.setState({active:false})
}catch(e){
this.setState({active:false})
console.log(e)
}
}

在interaction.js檔案中定義createFunding方法，并匯出該方法，

let createFunding = (projectName,targetMoney,supportMoney,duration)=>{
return new Promise(async (resolve,reject)=>{
try {//呼叫創建方法
let accounts =await web3.eth.getAccounts()
let res = await fundingFactoryInstance.methods.createFunding(projectName, targetMoney, supportMoney, duration).send({
from: accounts[0],
})
resolve(res)
}catch(e){
reject(e)
}
})
}

讓我們看看結果吧！！！！！

5.在AllFundingTab添加表單項，在render方法中把狀態變數的資料結構出來

render(){
return(
<div>
<CardList details={this.state.allFundingDetails}/>
<div>
<h3>參與眾籌</h3>
<Dimmer.Dimmable as={Segment} dimmed={this.state.active}>
<Dimmer active={this.state.active} inverted>
<Loader>支持中</Loader>
</Dimmer>
<Form onSubmit={this.handleInvest}>
<Form.Input type='text' value={''} label='專案名稱:'/>
<Form.Input type='text' value={''} label='專案地址:'/>
<Form.Input type='text' value={''} label='支持金額:'
labelPosition='left'>
<Label basic>￥</Label>
<input/>
</Form.Input>
<Form.Button primary content='參與眾籌'/>
</Form>
</Dimmer.Dimmable>
</div>
</div>

)
}

給card添加一個onClick方法，就可以點擊影像專案，回傳這個專案的詳細資訊

在card中設定一個回呼函式，這個回呼函式在AllFundingTab實作，通過props逐層傳給Card

點擊Card時，將card的詳細資訊通過回呼函式回傳給主界面AllFundingTab，從而完成資料的獲取

將回傳的detail設定到狀態變數中，展示在界面

發起參與眾籌

let onCardClick =props.onCardClick

<Card onClick={()=> onCardClick(detail2)}>

onCardClick =(selectedFundingDetail)=>{
console.log("bbb:",selectedFundingDetail)

<CardList details={this.state.allFundingDetails}onCardClick={this.onCardClick}/>

【通過allFundingTab創建一個函式OncardClick,然后通過cardlist傳遞給props,Props再傳遞給cardfunding,

再給card，回傳detail2,最后在主界面拿到即可】

6將拿到的資料展示到頁面

a.為了展示到頁面，引入seletedFundingDetail狀態變數

處理投資函式//需要傳遞選中合約地址 //創建合約實體，發起參與眾籌(send,value轉錢)

//創建合約實體 //填充地址 //執行投資

let handleInvestFunc = async (fundingAddress,supportMoney) =>{

    try {//創建合約實體
        let fundingInstance = newFundingInstance()
        //填充地址
        fundingInstance.options.address = fundingAddress
        //執行投資
        let accounts = await web3.eth.getAccounts()
        let res = await fundingInstance.methods.invest().send({
            from: accounts[0],
            value: supportMoney,
        })
        return res
    }catch(e){
        throw e
    }

}