Question

我目前正在处理我的反应应用程序的登录方面，我正面临从输入更新状态数据的问题。

我有这个组件：

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>
        )
    }
}

问题是，每次我提交clic时，我的州电子邮件/密码都为空，即使填写了字段，为什么会这样呢？

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

谢谢！

Answer 1

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

<a>

并对你的其他输入做同样的事情，一切都应该正常。据我所知，react-bootstrap中的FormControls不会给你第二个参数'newValue'。

Answer 2

像这样使用

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

现在，它应该工作。基本上输入框附带的值是可在event.target.value中找到。

React.Js - FormControl不会更新我的值

2 个答案: