material-ui textfieldの入力値を変数に入れたい。

Question

ログインのビューを作る際に、作ったコード

import React from 'react'
import TextField from 'material-ui/TextField'


const Login = () =>
  <div>
    <TextField
      hintText='UserID'
      floatingLabelText='UserID'
      email=this.refs.input.getValue()
    />
    <br />
    <TextField
      hintText='Password Field'
      floatingLabelText='Password'
      type='password'
      password=value
    />
  </div>

  firebase.auth().signInWithEmailAndPassword(email, password)

export default Login

やりたかったこと

textfieldで受け取った各値を
firebase.auth().signInWithEmailAndPassword(email, password)
のemail,passwordに代入したいです。

これができないのはjsの基礎知識量の問題かもしれません。

ついでに

これを実行するとテキスト入力が左にぎっちり密着します。これらの位置の調整の仕方も知りたいです。

Answer 1

class Login extends Component{
    constructor (props) {
    super(props)
    this.state = {
      email: '',
      password:''
    };
  }

  handleChange_email = (event) => {
    this.setState({
      email: event.target.email,
    });
  };

  handleChange_password = (event) => {
    this.setState({
      password: event.target.password
    });
  };

  render(){
    return(
      <div>
        <TextField
          id="emailform"
          value={this.state.email}
          floatingLabelText="UserID"
          onChange={this.handleChange_email}
          style={{
            margin: '0 auto',
          }}
          />
        <br />
        <TextField
          id="passwordform"
          value={this.state.password}
          floatingLabelText="password"
          type='password'
          onChange={this.handleChange_password}
          />

      </div>
    )
  }
}

コードの完成形はこんな感じ。
<TextField>自体に、値受け渡しのvalueがあり、それをhandleChangeのタイミングでメールやパスワード変数にバリューで受け取ったやつを渡すって感じ。