初心者がReact+FirebaseでWebアプリを作成する②　～複数の入力を取得してデータベースに反映させる～

①の続きです。

①で作ったfirebaseのデータベースに、入力された値を登録するようにします。

ReactのstateとsetStateで入力値を受け取れるようにします。
例でstateでnameに空値' 'を入れておきます。


```Javascript:App.js

class App extends React.Component{
  constructor(props){
    super(props);
      this.state = {
        name: '',
      }
}
```

TextFieldを設けて、onChangeでgetNameを発動させsetStateを行うようにします。

```Javascript:App.js

getName(event) {
    this.setState({
      name: event.target.value,
    });
};
```

```Javascript:App.js
//returnの中
<TextField  label="名前" 
value= {this.state.Name} 
onChange={(event)=>{this.getName(event)}}/> 
```
これでTextFieldの値がstateのnameに代入されます。

データの送り先を決めるため、
firebaseのDatabaseから「＋コレクションの開始」をクリックして、コレクションを作成します。
コレクション名はとりあえず「users」として、ドキュメントIDは自動を選択。
すると下のような画面になります。
![firebase database collection dekita.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/8f370861-86d9-7348-633c-c7225507f978.png)

buttonを作って、このコレクションにnameの情報を送ります。
次のようになります。

```Javascript: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;

```

すると↓のようなページができます。
「登録」をクリックしてテスト送信してみましょう。
![database 山田太郎.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/b71830ff-f4cf-e5ef-6b1b-d77b00ee7d51.png)
反映できました。
![database 山田太郎が追加された.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/92a3a129-3548-cd44-ce48-7be8795493f6.png)

同じ要領でstateにaddressを設けて、住所も同時に登録できるようにします。
getAddressでsetStateを行えるようにしましょう。

```Javascript: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つできました。
![明訓.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/bd92919a-332c-320e-3179-a0b846c4a1ce.png)

登録を押すと…

![明訓完了.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/520057/1aa024b1-290a-192e-e6f5-92bbd851e38b.png)

できました！

次回は画像のアップロードを投稿したいと思います。