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