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

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

js
1import React from 'react'
2import TextField from 'material-ui/TextField'
3
4
5const Login = () =>
6  <div>
7    <TextField
8      hintText='UserID'
9      floatingLabelText='UserID'
10      email=this.refs.input.getValue()
11    />
12    <br />
13    <TextField
14      hintText='Password Field'
15      floatingLabelText='Password'
16      type='password'
17      password=value
18    />
19  </div>
20
21  firebase.auth().signInWithEmailAndPassword(email, password)
22
23export default Login

やりたかったこと

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

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

ついでに

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

行動規範の内容に同意します

回答1件

自己解決

js
1class Login extends Component{
2    constructor (props) {
3    super(props)
4    this.state = {
5      email: '',
6      password:''
7    };
8  }
9
10  handleChange_email = (event) => {
11    this.setState({
12      email: event.target.email,
13    });
14  };
15
16  handleChange_password = (event) => {
17    this.setState({
18      password: event.target.password
19    });
20  };
21
22  render(){
23    return(
24      <div>
25        <TextField
26          id="emailform"
27          value={this.state.email}
28          floatingLabelText="UserID"
29          onChange={this.handleChange_email}
30          style={{
31            margin: '0 auto',
32          }}
33          />
34        <br />
35        <TextField
36          id="passwordform"
37          value={this.state.password}
38          floatingLabelText="password"
39          type='password'
40          onChange={this.handleChange_password}
41          />
42
43      </div>
44    )
45  }
46}