Blockchain code Metaverse VR

Crypto×VR×SmartContract(463)

スポンサーリンク

//tips

//smart contract

フォームも組み込んでコンポーネントを作成する。

Onsubmitの際に実行されるdosubmitメソッドを作成し、中身をsetstateで更新できるようにしている。 event.preventDefault()は発生したイベントを消費し、フォームが送信されなくなる。

フォームが持つデフォルトの動作とは、フォームの内容を指定したURLへ送信するという動作で、form要素に送信先が指定されていない場合、現在のURLに対してフォームの送信が行われ、ページがリロードされてしまう。 そのため、event.preventDefault()を呼び出し、デフォルトの動作をキャンセルしている。

参考:
https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae

また、onchangeで入力した値をリアルタイムにチェック。

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

class App extends Component {
input = ''

constructor(props){
super(props)
this.state = {
title: 'input form',
message:'type your name.'
}
this.doChange = this.doChange.bind(this)
this.doSubmit = this.doSubmit.bind(this)
}

doChange(event) {
this.input = event.target.value;
}

doSubmit(event) {
this.setState({
title: 'send form',
message: 'Hello, ' + this.input + '!!'
})
event.preventDefault()
}

render(){
return <div>
<h1 className="bg-primary text-white display-4">React</h1>
<div className="container">
<h4>{this.state.title}</h4>
<p className="card h5 p-3">{this.state.message}</p>
<div className="alert alert-primary mt-3">
<form onSubmit={this.doSubmit}>
<div className="form-group">
<label>Message:</label>
<input type="text" className="form-control"
onChange={this.doChange} />
</div>
<input type="submit" className="btn btn-primary"
value="Click" />
</form>
</div>
</div>
</div>
}
}

export default App

今度は複数コンポーネントに共通の値を呼び出させるようになるstatic cpntextTypeを組み込む。ここまでは属性情報としてタグの内部に書き込んだ値でやり取りしていたが、それとは別の方法となる。

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

let data = {title:'React-Context',
message:'this is sample message.'}

const SampleContext = React.createContext(data)

class App extends Component {
render(){
return <div>
<h1 className="bg-primary text-white display-4">React</h1>
<div className="container">
<Title />
<Message />
</div>
</div>
}
}

class Title extends Component {
static contextType = SampleContext

render(){
return (
<div className="card p-2 my-3">
<h2>{this.context.title}</h2>
</div>
)
}
}

class Message extends Component {
static contextType = SampleContext

render(){
return (
<div className="alert alert-primary">
<p>{this.context.message}</p>
</div>
)
}
}

export default App

createContextでdataをコンテキスト設定していることがわかる。コンポーネントの中でこれをstatic contextType = SampleContextと宣言することで、コンテキストを呼び出すことができ、共通の値を利用可能になる。

このコンテキストを一部のコンポーネントで変更したい時にはproviderを用いることになる。プロバイダーはコンテキストのproviderプロパティとして用意されるコンポーネント。タグの中だけでコンテキストの値が変更できる。

class App extends Component {
newdata = {title:'新しいタイトル',
message:'これは新しいメッセージです。'}

render(){
return <div>
<h1 className="bg-primary text-white display-4">React</h1>
<div className="container">
<Title />
<Message />
<hr />
<SampleContext.Provider value={this.newdata}>
<Title />
<Message />
</SampleContext.Provider>
<hr />
<Title />
<Message />
</div>
</div>
}
}

このように

<SampleContext.Provider value={this.newdata}>
<Title />
<Message />
</SampleContext.Provider>

で囲えばよい。

ただ、クラスコンポーネントの複雑さは問題の要因になるので、今後は関数コンポーネントを極力使い開発を行う。

その際にはhooksというものが出てきて、フックを使用することでステートを含む処理をコンポーネントから切り離して際利用可能にする。

つまり、関数コンポーネントでもステートのようにリアルタイムの値を管理できるようになる。

まずはuseStateから使用していく。

const [message] = useState("Welcome to Hooks!”)としてreturnの内容として <p className="h5">{message}.</p>を入れ込めば良い。すごいシンプル。

今度はボタンクリックごとにステートの値を変化させる。

function App() {
const [count, setCount] = useState(0)
const clickFunc = () => {
setCount(count + 1)
}

return (
<div>
<h1 className="bg-primary text-white display-4 ">React</h1>
<div className="container">
<h4 className="my-3">Hooks sample</h4>
<div className="alert alert-primary text-center">
<p className="h5 mb-3">click: {count} times!</p>
<div><button className="btn btn-primary"
onClick={clickFunc}>
Click me
</button></div>
</div>
</div>

ステートの値を取り出す際にはcount,変更する時にはsetCountを実行する。 useState(0)は初期値が0であることを示している。

このステートを変更する関数を下記のように設定している。

const clickFunc = () => {
setCount(count + 1)
}

今度は複数のステートを設定する。チェックボックスのon/offで表示を切り替えられるようにしている。

<div className="form-group h6 text-center pt-3">
<input type="checkbox" className="form-check-input"
id="check1" onChange={changeFlag} />
<label className="form-check-label" htmlFor="check1">
Change form style.
</label>

チェックボックスでの切り替えはonChangeというイベント属性を使用してチェックボックスの更新状態を取得できるようにする。状態の変更の際はonChangeを利用すると覚えておく。

関数コンポーネントの場合は基本的にコンポーネントで使われる値は全てステートとして保管する。これは関数コンポーネントは、関数なので値を保管する機能はなく、常にリロードしてる変われることになる。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

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

3

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

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.