时间戳

首页 > 解决方案 > 我的表单不接受用户的输入值

reactjs - 我的表单不接受用户的输入值

问题描述

我有一个使用 react-strap 创建的登录表单我遇到了输入值问题，该表单对于电子邮件的第一个输入表现为只读，但接受密码的第二个输入。我已尝试删除电子邮件字段以跟踪密码字段是否无法接受输入但效果很好我已附上我的组件代码，请感谢任何可以帮助解决此问题的人

import React, { Component } from 'react';
import { Button, Card, CardBody, Col, Container, Form, Input, InputGroup, Row } from 
'reactstrap';  
import './Login.css'
class Login extends Component {
    constructor(props) {
        super(props)

        this.state = {
             email:'',
             password:''
        }

    }
    changeHandler = (e) =>{

        this.setState({[e.target.name]:e.target.value });
    }
    onSubmit = (e) =>{
        e.preventDefault();
        fetch('http://localhost:5000/user/login',{
            method:'POST',
            body:JSON.stringify(this.state),

        })
        .then(response =>{
            if(response.status === 200){
                this.props.history.push('/')

            }else{
                const error = new Error(response.error);
                throw error;
            }
        })
        .catch(err=>{
            console.error(err);
            alert('Ooops! Login failed please check your email and password, then try again')
        })
    }
    render() {
        return (
            <div className="app flex-row align-items-center">
            <Container className="container">
                <Row className="justify-content-center">
                    <Col md="12" lg="10" xl="8">
                        <Card className="mx-4">
                            <CardBody className="p-4">
                                <Form  onSubmit={this.onSubmit} className="login-form">
                                    <h1>Login Form</h1>
                                    <InputGroup className="mb-3">
                                        <Input type="email " 
                                        name="email " 
                                        required="required"
                                        placeholder="email "
                                        value={this.state.email }
                                        onChange={this.changeHandler}
                                        />
                                    </InputGroup>

                                    <InputGroup className="mb-3">
                                        <Input type="password" 
                                        name="password" 
                                        required="required"
                                        placeholder="Password"
                                        value={this.state.password}
                                        onChange={this.changeHandler}
                                        />
                                    </InputGroup> 
                                        <Row>
                                            <Col xs="12" sm="6">
                                                <Button type="submit"  className="btn btn-info mb-1" block><span>Login</span>
                                                </Button>
                                                <a href="/">Home</a>
                                            </Col>
                                        </Row>
                                </Form>
                            </CardBody>
                        </Card>
                    </Col>
                </Row>
            </Container>

        </div>
        )
    }
}
export default Login;

标签： reactjs

解决方案

问题是您的输入名称中有一个空格：

<Input type="email " 
    name="email "
               ^ remove this space

因此，您的更改处理程序无法设置状态，因为它设置的是“电子邮件”而不是“电子邮件”。

您的输入类型和占位符中还有一个空格。

推荐阅读