//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を利用すると覚えておく。
関数コンポーネントの場合は基本的にコンポーネントで使われる値は全てステートとして保管する。これは関数コンポーネントは、関数なので値を保管する機能はなく、常にリロードしてる変われることになる。
