我的表單不接受用戶的輸入值

Question

我有一個用 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;

Answer 1

問題是您的輸入名稱中有一個空格：

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

因此，您的更改處理程序無法設置狀態，因為它設置的是“電子郵件”而不是“電子郵件”。

您的輸入類型和占位符中也有一個空格。

Answer 2

問題可能出在changeHandler 。 當你將它傳遞給一個輸入時

onChange={this.changeHandler}

this在

changeHandler = (e) =>{
  this.setState({[e.target.name]:e.target.value });
}

指的是 input 而不是 Class 組件，因此它不會更新state 。

要解決這個問題，您應該將 Class 組件this綁定到changeHandler 。

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

您也可以閱讀這篇文章。