5-3. Thành phần đếm
Thành phần Đếm
Đếm1) Mã lệnh đầy đủ
import React, { Component } from 'react'
import cx from 'classnames'
import { cav } from 'klaytn/caver'
import './Count.scss'
class Count extends Component {
constructor() {
super()
// ** 1. Tạo phiên bản hợp đồng **
// ex:) new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
// Bạn có thể gọi phương pháp hợp đồng qua phiên bản này.
// Hiện giờ bạn có thể truy cập vào phiên bản bằng biến `this.countContract`.
this.countContract = DEPLOYED_ABI
&& DEPLOYED_ADDRESS
&& new cav.klay.Contract(DEPLOYED_ABI, DEPLOYED_ADDRESS)
this.state = {
count: '',
lastParticipant: '',
isSetting: false,
}
}
intervalId = null
getCount = async () => {
// ** 2. Gọi phương pháp hợp đồng (CALL) **
// ex:) this.countContract.methods.methodName(arguments).call()
// Bạn có thể gọi phương pháp hợp đồng (CALL) như ở trên.
// Ví dụ: Hợp đồng của bạn có phương pháp tên là `count`.
// Bạn có thể gọi như dưới đây:
// ex:) this.countContract.methods.count().call()
// Nó trả về promise, nên bạn có thể truy cập nó bằng .then() hoặc, sử dụng async-await.
const count = await this.countContract.methods.count().call()
const lastParticipant = await this.countContract.methods.lastParticipant().call()
this.setState({
count,
lastParticipant,
})
}
setPlus = () => {
const walletInstance = cav.klay.tài khoảns.wallet && cav.klay.tài khoảns.wallet[0]
// Cần tích hợp ví để gọi phương pháp hợp đồng.
if (!walletInstance) return
this.setState({ settingDirection: 'plus' })
// 3. ** Gọi phương pháp hợp đồng (SEND) **
// ex:) this.countContract.methods.methodName(arguments).send(txObject)
// Bạn có thể gọi phương pháp hợp đồng (SEND) như trên.
// Ví dụ: Hợp đồng của bạn có phương pháp tên là `count`.
// Bạn có thể gọi như dưới đây:
// ex:) this.countContract.methods.plus().send({
// from: '0x952A8dD075fdc0876d48fC26a389b53331C34585', // PUT YOUR ADDRESS
// gas: '200000',
// })
try{
this.countContract.send({
from: walletInstance.address,
gas: '200000',
}, 'plus')
.then((receipt) => {
console.log(`
Đã nhận được biên lai! Điều đó nghĩa là giao dịch của bạn (gọi hàm plus)
ở trong khối klaytn(#${receipt.blockNumber})
`, receipt)
this.setState({
settingDirection: null,
txHash: receipt.transactionHash,
})
})
} catch (error) {
alert(err.message)
this.setState({ settingDirection: null })
}
}
setMinus = () => {
const walletInstance = cav.klay.tài khoảns.wallet && cav.klay.tài khoảns.wallet[0]
// Cần tích hợp ví để gọi phương pháp hợp đồng.
if (!walletInstance) return
this.setState({ settingDirection: 'minus' })
// 3. ** Gọi phương pháp hợp đồng (SEND) **
// ex:) this.countContract.methods.methodName(arguments).send(txObject)
// Bạn có thể gọi phương pháp hợp đồng (SEND) như trên.
// Ví dụ: Hợp đồng của bạn có phương pháp tên là `minus`.
// Bạn có thể gọi như dưới đây:
// ex:) this.countContract.methods.minus().send({
// from: '0x952A8dD075fdc0876d48fC26a389b53331C34585', // PUT YOUR ADDRESS
// gas: '200000',
// })
// Nó trả về sự kiện emitter, nên sau khi gửi, bạn có thể nghe được sự kiện.
// Sử dụng sự kiện .on('transactionHash'),
// : nếu bạn muốn xử lý logic sau khi gửi giao dịch.
// Sử dụng sự kiện .once('receipt'),
// : nếu bạn muốn xử lý logic sau khi giao dịch của mình đã được đặt vào khối.
// ex:) .once('receipt', (data) => {
// console.log(data)
// })
try{
this.countContract.send({
from: walletInstance.address,
gas: '200000',
}, 'minus')
.then((receipt) => {
console.log(`
Đã nhận được biên lai! Điều đó nghĩa là giao dịch của bạn (gọi hàm minus)
ở trong khối klaytn(#${receipt.blockNumber})
`, receipt)
this.setState({
settingDirection: null,
txHash: receipt.transactionHash,
})
})
} catch (error) {
alert(err.message)
this.setState({ settingDirection: null })
}
}
componentDidMount() {
this.intervalId = setInterval(this.getCount, 1000)
}
componentWillUnmount() {
clearInterval(this.intervalId)
}
render() {
const { lastParticipant, count, settingDirection, txHash } = this.state
return (
<div className="Count">
{lastParticipant && (
<div className="Count__lastParticipant">
last participant: {lastParticipant}
</div>
)}
<div className="Count__count">COUNT: {count}</div>
<button
onClick={this.setPlus}
className={cx('Count__button', {
'Count__button--setting': settingDirection === 'plus',
})}
>
+
</button>
<button
onClick={this.setMinus}
className={cx('Count__button', {
'Count__button--setting': settingDirection === 'minus',
})}
>
-
</button>
{txHash && (
<div className="Count__lastTransaction">
<p className="Count__lastTransactionMessage">
Bạn có thể kiểm tra giao dịch gần nhất trong phạm vi klaytn:
</p>
<a
target="_blank"
href={`https://baobab.klaytnfinder.io/tx/${txHash}`}
className="Count__lastTransactionLink"
>
{txHash}
</a>
</div>
)}
</div>
)
}
}
export default Count2) Vai trò của thành phầnCount
Count3) Cách tương tác với hợp đồng?
4) Tương tác với hợp đồng: phương pháp getCount
getCount5) Tương tác với hợp đồng: phương pháp setPlus
setPlus6) Vòng đời giao dịch
Tôi kiểm tra giao dịch của mình trong blockchain thế nào?
Last updated