React.Js - FormControl 不更新我的值

Question

我目前正在我的 React 应用程序的登录端工作，我遇到了从输入更新我的状态数据的问题。

我有这个组件：

import React from 'react'
import { login } from '../../api/Authentication'
import { setStore } from '../../webapp/storage'
import { Button, ControlLabel, Form, FormControl, FormGroup } from 'react-bootstrap';


export default class LoginPage extends React.Component {

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

    handleSubmit(event) {

        if (this.state.email == '' || this.state.password == '') {
            if (this.state.email == '') {
                this.badInfosAlert('Email field empty')
            } else if (this.state.password == '') {
                this.badInfosAlert('Password field empty')
            }
            return
        }

        console.log('-----------------------')
        console.log(this.state.email)
        console.log(this.state.password)
        var user = {
            email: this.state.email,
            password: this.state.password
        }
        console.log(JSON.stringify(user))
        console.log('-----------------------')

        login(user).then(result => {
            if (result != null && result.status == 200) {
                setStore('token', result.json.user.token)
            } else {
                this.badInfosAlert(result.json.error)
            }
        }).catch(this.badInfosAlert('An error happend'));
    }

    badInfosAlert(message) {
        console.log(message);
        alert(message);
    }

    render() {
        return (
            <div className='col-lg-12'>
                <Form>
                    <FormGroup controlId="formHorizontalEmail">
                        <ControlLabel>Email </ControlLabel>
                        <FormControl type="username" onChange = {(event,newValue) => this.setState({email:newValue})} placeholder="Email" />
                    </FormGroup>
                    <FormGroup controlId="formHorizontalPassword">
                        <ControlLabel>Password </ControlLabel>
                        <FormControl type="password" onChange = {(event,newValue) => this.setState({password:newValue})} placeholder="Password" />
                    </FormGroup>
                    <Button onClick={(event) => this.handleSubmit(event)}>Login</Button>
                </Form>
            </div>
        )
    }
}

问题是，每次我点击提交，我的状态email/password都是空的，即使字段被填满了，为什么？

我对 JavaScript 仍然是超级新手（不仅仅是反应）所以请尽可能多地解释你的答案:)

谢谢！

Answer 1

这样使用

 <FormControl type="username" onChange = {(event) => this.setState({email:event.target.value})} placeholder="Email" />

Now, it should work. Basically the value attached to input box is available in event.target.value.

Answer 2

正如您在 react-bootstrap forms 的文档中看到的那样，您将从提供给函数的事件对象中获取 newValue。所以你的代码应该是这样的：

<FormControl type="username" onChange = {(event) => this.setState({email: event.target.value })} placeholder="Email" />

并对您的其他输入执行相同的操作，一切都会正常进行。据我所知，来自 react-bootstrap 的 FormControls 不会给你第二个参数 'newValue'.

React.Js - FormControl 不更新我的值

React.Js - FormControl doesn't update my value

reactjs

state

form-control