Account <!-- Create Account Page --!>
# モジュールのインポート
import React, { Component } from 'react'
import {
Box,
Button,
Container,
Paper,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
TextField,
Typography,
} from '@material-ui/core'
import { AccountHttp, Address } from 'nem2-sdk'
# accountHttp
const accountHttp = new AccountHttp('http://localhost:3000')
# ファンクションコンポーネント？
class Account extends Component {
constructor(props) {
super(props)
# 三項演算子で判定して、nullだったら'',それ以外はlocalStorageの'address'の値を取得して代入
const address = localStorage.getItem('address') === null ? '' : JSON.parse(localStorage.getItem('address'))
this.state = {
input: {
address,
},
public_key: '',
mosaic: 0,
importance: 0,
}
}
# 関数の実行
componentDidMount() {
if (this.state.input.address.length === 40 || this.state.input.address.length === 46) {
try {
# addressの定義
const address = Address.createFromRawAddress(this.state.input.address)
# createFromRawAddress(str)はAddressで定義されているはず
accountHttp.getAccountInfo(address).subscribe(
accountInfo => {
this.setState({
＃各種情報はacccountinfoに入っているはず
public_key: accountInfo.publicKey,
mosaic: accountInfo.mosaics[0].amount.compact(),
importance: accountInfo.importance.compact(),
})
console.log(accountInfo)
},
err => console.error(err)
)
} catch (e) {
console.log(e)
}
}
}
# this = 同じクラスの中で呼び出せる？
handleFormInputChanged(event) {
# stateにリストを定義する
# 参照：
-----
setState部分の解説
...lists, とは
...this.state.listsの部分では今のsetStateのlist配列を展開し、その後ろの
{ title: this.state.title, author: this.state.author }
の部分でフォームに入力されたtitle, authorの値を配列listsの最後に追加します。
...this.state.listsがないと2回目以降のonClickの際に、今までにlists:[]に追加した内容が消えてしまうので注意してください。
----
this.setState({
input: {
...this.state.input,
[event.target.name]: event.target.value,
},
})
localStorage.setItem(event.target.name, JSON.stringify(event.target.value))
}
handleGetAddressInfo() {
if (this.state.input.address.length === 40 || this.state.input.address.length === 46) {
try {
const address = Address.createFromRawAddress(this.state.input.address)
# accountInfoの中身を入れる
accountHttp.getAccountInfo(address).subscribe(
accountInfo => {
this.setState({
public_key: accountInfo.publicKey,
mosaic: accountInfo.mosaics[0].amount.compact(),
importance: accountInfo.importance.compact(),
})
console.log(accountInfo)
},
err => console.error(err)
)
} catch (e) {
console.log(e)
}
}
}
render() {
return (
<Container maxWidth="md">
<Box m={2}>
<Box p={1}>
<Typography variant="h4" gutterBottom>
NEMアカウント情報の取得
</Typography>
</Box>
<Box p={1}>
<Typography variant="body1" gutterBottom>
ネムのカタパルトユーザーのアドレスを入力
</Typography>
# bind：入れ子構造の中でthis=インスタンスを参照した際に親クラスのthisを参照できなくなってしまうことを防ぐ。つまり先程の入れ子のケースでは、入れ子になっていない（thisが本来の値を指している）場所でbind(this)とすることで、thisの値が変わってしまうのを防ぐことが出来る。
# 参照:
<TextField
label="Address"
name="address"
onChange={this.handleFormInputChanged.bind(this)}
value={this.state.input.address}
margin="normal"
styles={{ width: '100%' }}
fullWidth
/>
<Button variant="contained" color="primary" onClick={this.handleGetAddressInfo.bind(this)}>
取得
</Button>
</Box>
<Box p={1}>
<Paper>
<Table>
<TableHead>
<TableRow>
<TableCell>ラベル</TableCell>
<TableCell>値</TableCell>
</TableRow>
</TableHead>
<TableBody style={{ wordBreak: 'break-all' }}>
<TableRow>
<TableCell>アドレス</TableCell>
<TableCell>{this.state.input.address}</TableCell>
</TableRow>
<TableRow>
<TableCell>公開鍵</TableCell>
<TableCell>{this.state.public_key}</TableCell>
</TableRow>
<TableRow>
<TableCell>モザイク</TableCell>
<TableCell>{this.state.mosaic}</TableCell>
</TableRow>
<TableRow>
<TableCell>インポータンス</TableCell>
<TableCell>{this.state.importance}</TableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</Box>
</Box>
</Container>
)
}
}
export default Account
