Blockchain code Metaverse VR

Crypto×VR×SmartContract(464)

スポンサーリンク

//tips

//smart contract

続いてボタンクリックでメッセージを表示し、表示内formの入力内容に名前を記入することで、元のページの内容を変更して表示する。

import React, { useState } from 'react'
import './App.css'

function AlertMessage(props) {
return <div className="alert alert-primary h5 text-primary">
{props.message}
</div>
}

function CardMessage(props) {
return <div className="card p-3 h5 border-primary text-center">
{props.message}
</div>
}

function App() {
const [msg, setMsg] = useState("This is sample messsage!")

const doAction = ()=>{
let res = window.prompt('type your name:')
setMsg("Hello, " + res + "!!")
}

return (
<div>
<h1 className="bg-primary text-white display-4 ">React</h1>
<div className="container">
<h4 className="my-3">Hooks sample</h4>
<AlertMessage message={msg} />
<CardMessage message={msg} />
<div className="text-center">
<button onClick={doAction} className="btn btn-primary">
Click me!
</button>
</div>
</div>
</div>
)
}

export default App

window.promptはjsの標準機能でテキストを入力するダイアログを表示するもの。入力した値を戻り値として返し、それをsetMsgでmsgステージに設定する。

ここでは <AlertMessage message={msg} />のように属性値をステートで指定しておくことで、propsを使い、各コンポーネントで編集ができるようにしていた。

各コンポーネントから値をあげる方法も考える。

import React, { useState } from 'react'
import './App.css'

function AlertMessage(props) {
const data = ["Hello!", "Welcome...", "Good-bye?"]

const actionAlert = ()=> {
const re = data[Math.floor(Math.random() * data.length)]
props.setAlert('message: "' + re + '".')
}

return <div className="alert alert-primary h5 text-primary">
<h5>{props.alert}</h5>
<button onClick={actionAlert} className="btn btn-primary">
Click me!
</button>
</div>
}

function CardMessage(props) {
const [count, setCount] = useState(0)

const actionCard = () => {
setCount(count + 1)
props.setCard("card counter: " + count + " count.")
}

return <div className="card p-3 border-dark text-center">
<h5>{props.card}</h5>
<button onClick={actionCard} className="btn btn-secondary">
Click me!
</button>
</div>
}

function App() {
const [alert, setAlert] = useState("This is alert messsage!")
const [card, setCard] = useState("This is card messsage!")

return (
<div>
<h1 className="bg-primary text-white display-4 ">React</h1>
<div className="container">
<h4 className="my-3">Hooks sample</h4>
<AlertMessage alert={alert} setAlert={setAlert} />
<CardMessage card={card} setCard={setCard} />
<hr />
<div className="text-right">
<p>{alert}</p>
<p>{card}</p>
</div>
</div>
</div>
)
}

export default App

このようにステート変数とステート変更関数を一緒に渡していることがわかる。

<AlertMessage alert={alert} setAlert={setAlert} />
<CardMessage card={card} setCard={setCard} />

このsetAlartなどをコンポーネントから呼び出し、値を変更することで、一緒にalertの方も更新される。

今度はサーバにアクセスしてデータを取得するような更新の際に必要な処理の対処法も確認する。今まではフォームに記入するなど、フロントエンドで完結していたがバックエンドも絡めて考える。

その際に使用するのがuseEffectという副作用フックと呼ばれるもの。これをコンポーネントが更新された際に指定の関数を引数にして実行させれば良い。

下記のようにdoChangeでvalの値が更新されると、コンポーネントが更新され、それによりuseEffectで設定された関数が自動的に呼び出され計算結果が表示されている。このコンポーネントの更新という考え方には習熟しておく必要がありそう。

function App() {
const [val, setVal] = useState(0)
const [msg, setMsg] = useState('set a number...')

const doChange = (event) => {
setVal(event.target.value)
}

useEffect(() => {
let total = 0
for (let i = 0;i <= val;i++) {
total += i
}
setMsg("total: " + total + ".")
})

return (
<div>
<h1 className="bg-primary text-white display-4 ">React</h1>
<div className="container">
<h4 className="my-3">Hooks sample</h4>
<AlertMessage msg={msg} />
<div className="form-group">
<label>Input:</label>
<input type="number" className="form-control"
onChange={doChange} />
</div>
</div>
</div>
)
}

このuseEffectの利用でdoChangeの内容がかなりシンプルに描けるようになった。

また、複数useEffectの更新による無限呼び出しを避けるために、第二引数に更新の際に呼び出しを実行する対象を指定することができる。

下記のようにtax1,tax2が更新されたら、こちらは実行される。

useEffect(() => {
let res = <div>
<p>軽減税率(8%) : {tax1} 円</p>
<p>通常税率(10%): {tax2} 円</p>
</div>
setMsg(res)
}, [tax1, tax2])

次に関数コンポーネントないに既存のフックを使って機能を実装するのではなく、機能そのものをオリジナルフックとして生成する方法で考える。

オリジナルフックはuseで始まる関数を作成すれば良いという非常に簡単なもの。

下記のようなものがそれに当たる。

function useCounter() {
const [num, setNum] = useState(0)

const count = ()=>{
setNum(num + 1)
}

return [num, count]
}

これをもとにページを作成していくと、 useCounter() をAlertMessage(props) 内部でステートとして扱い、その変更関数として実行することで表示反映に干渉できる。

import React, { useState, useEffect } from 'react'
import './App.css'

function useCounter() {
const [num, setNum] = useState(0)

const count = ()=>{
setNum(num + 1)
}

return [num, count]
}

function AlertMessage(props) {
const [counter, plus] = useCounter()

return <div className="alert alert-primary h5 text-center">
<h4>count: {counter} .</h4>
<button onClick={plus} className="btn btn-primary">
count</button>
</div>
}

function App() {
return (
<div>
<h1 className="bg-primary text-white display-4 ">React</h1>
<div className="container">
<h4 className="my-3">Hooks sample</h4>
<AlertMessage />
</div>
</div>
)
}

export default App

人気の記事

1

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

4

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.