①の続きです。
①で作ったfirebaseのデータベースに、入力された値を登録するようにします。
ReactのstateとsetStateで入力値を受け取れるようにします。
例でstateでnameに空値' 'を入れておきます。
App.js
class App extends React.Component{
constructor(props){
super(props);
this.state = {
name: '',
}
}
TextFieldを設けて、onChangeでgetNameを発動させsetStateを行うようにします。
App.js
getName(event) {
this.setState({
name: event.target.value,
});
};
App.js
//returnの中
<TextField label="名前"
value= {this.state.Name}
onChange={(event)=>{this.getName(event)}}/>
これでTextFieldの値がstateのnameに代入されます。
データの送り先を決めるため、
firebaseのDatabaseから「＋コレクションの開始」をクリックして、コレクションを作成します。
コレクション名はとりあえず「users」として、ドキュメントIDは自動を選択。
すると下のような画面になります。
buttonを作って、このコレクションにnameの情報を送ります。
次のようになります。
App.js
import React from 'react';
import './App.css';
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import { firestore } from './plugins/firebase';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
class App extends React.Component{
constructor(props){
super(props);
this.state = {
name: '',
}
//ここでbindでthisを束縛しないとエラーが起きます
this.getName = this.getName.bind(this);
this.addData = this.addData.bind(this);
}
getName(event) {
this.setState({
name: event.target.value,
});
};
addData(){
firestore.collection('users').add({
name: this.state.name,
}).then(() => {
this.setState({
name: '',
});
})};
render(){
return(
<div>
<TextField label="名前"
value= {this.state.name}
onChange={(event)=>{this.getName(event)}}/>
<Button onClick={this.addData}>登録</Button>
</div>
);
}
}
export default App;
すると↓のようなページができます。
「登録」をクリックしてテスト送信してみましょう。
反映できました。
同じ要領でstateにaddressを設けて、住所も同時に登録できるようにします。
getAddressでsetStateを行えるようにしましょう。
App.js
import React from 'react';
import './App.css';
import firebase from "firebase/app"
import "firebase/auth"
import "firebase/firestore"
import { firestore } from './plugins/firebase';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import TextareaAutosize from '@material-ui/core/TextareaAutosize';
class App extends React.Component{
constructor(props){
super(props);
this.state = {
name: '',
address: '',
}
this.getName = this.getName.bind(this);
this.getAddress = this.getAddress.bind(this);
this.addData = this.addData.bind(this);
}
getName(event) {
this.setState({
name: event.target.value,
});
};
getAddress(event) {
this.setState({
address: event.target.value,
});
};
//new Date()で登録日時も記録してみました。
addData(){
firestore.collection('users').add({
name: this.state.name,
address: this.state.address,
created_at: new Date(),
}).then(() => {
this.setState({
name: '',
address: '',
});
})};
render(){
return(
<div>
<form>
<TextField label="名前"
value= {this.state.name}
onChange={(event)=>{this.getName(event)}}/>
<br/>
<TextareaAutosize
aria-label="住所"
rows={6}
placeholder="住所"
value= {this.state.address}
onChange={(event)=>{this.getAddress(event)}}
/>;
<br/>
<Button onClick={this.addData}>登録</Button>
</form>
</div>
);
}
}
export default App;
これで入力箇所が2つできました。
登録を押すと…
できました！
次回は画像のアップロードを投稿したいと思います。