2016-10-15 3 views
0

Я получаю странное поведение при вводе пароля на свой счет <input/>. Каждый раз, когда я ввожу что-то в него, состояние не изменяется, но оно console.logs. То же самое не происходит с полем электронной почты, и когда я пытаюсь отправить форму, пароль пуст ... Что я делаю неправильно?React Form onChange не обновляет состояние

Это мой компонент реагирует:

5 export default class Login extends React.Component { 
    6 state: { 
    7  email: string, 
    8  password: string, 
    9 }; 
10 
11 handleEmailChange: (e: any) => void; 
12 handlePasswordChange: (e: any) => void; 
13 handleButtonPress:() => void; 
14 
15 constructor() { 
16  super(); 
17  this.state = { email: '', password: '' }; 
18 
19  this.handleEmailChange = this.handleEmailChange.bind(this); 
20  this.handlePasswordChange = this.handleButtonPress.bind(this); 
21  this.handleButtonPress = this.handleButtonPress.bind(this); 
22 }; 
23 
24 handleEmailChange(e: any) { 
25  this.setState({ email: e.target.value }); 
26 }; 
27 
28 handlePasswordChange(e: any) { 
29  this.setState({ password: e.target.value }); 
30 }; 
31 
32 handleButtonPress() { 
33  axios.post('/api/users/login', { 
34  email: this.state.email, 
35  password: this.state.password, 
36  }) 
37  .then((response: any) => { 
38  console.log(response.data); 
39  }) 
40  .catch((error: any) => { 
41  console.log(error); 
42  }); 
43 }; 
44 
45 render() { 
46  return (
47  <div> 
48   <input 
49   type="email" 
50   onChange={this.handleEmailChange} 
51   placeholder="Enter email" 
52   /> 
53   <input 
54   type="password" 
55   onChange={this.handlePasswordChange} 
56   placeholder="Enter password" 
57   /> 
58   <button onClick={this.handleButtonPress}> 
59   Login! 
60   </button> 
61  </div> 
62 ); 
63 } 
64 } 

Вот скриншот того, что происходит, когда я иду ввести пароль: enter image description here

Спасибо заранее.

ответ

1

ошибка в строке -20.

this.handlePasswordChange = this.handleButtonPress.bind(this); 

должно быть

this.handlePasswordChange = this.handlePasswordChange.bind(this);