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

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

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.