Невозможно ввести пароль в поле ввода

Question

Я создаю простую страницу входа.Когда я объявил состояния и попытался использовать их в качестве значения поля ввода, я не могу ввести или ввести что-либо в поле ввода.

Эта проблема возникает только при вводе пароля, поле ввода электронной почты работает нормально.

export default class SignIn extends Component{
    constructor(props){
        super(props)
        this.state = {
            email:'',
            password:''
        };
        this.handleEmailChange = this.handleEmailChange.bind(this);
        this.handlePasswordChange = this.handlePasswordChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        };
        handleEmailChange(event) {
            this.setState({email: event.target.value});
            console.log(this.state.email)
        }
        handlePasswordChange(event) {
            this.setState({Password: event.target.value});
            console.log(this.state.password)
        }
        handleSubmit(event) {
            event.preventDefault();
            const fdata = new FormData()
            fdata.append('email',this.state.email)
            fdata.append('password',this.state.password)
            axios({
                method: 'post',
                url: 'abc.com/abc',
                data: fdata
            })
            .then(function(response){
                console.log(response)
                response.json()
            })
            .then(function(responseJson){
                console.log(responseJson)
            })
            .catch(function(){
                alert("Failed")
            })
        }
    render(){
        return(
            <div>
                <div className="container mt-5">
                <form action="/action_page.php">
                    <div className="form-group">
                    <label htmlFor="email">Email:</label>
                    <input  type="email"
                            value={this.state.email}
                            onChange={this.handleEmailChange}
                            className="form-control" 
                            id="email"
                            placeholder="Enter email" 
                            name="email" />
                    </div>
                    <div className="form-group">
                    <label htmlFor="pwd">Password:</label>
                    <input  type="password"
                            value={this.state.password}
                            onChange={this.handlePasswordChange}
                            className="form-control" 
                            id="pwd" 
                            placeholder="Enter password" 
                            name="pswd" />
                    </div>
<button type="submit" onClick={this.handleSubmit}>Submit</button>
                </form>
                </div>
            </div>
        )
    }
}

Я ожидаю использовать состояние пароля в пароле ввода типа и не хочу использовать какое-либо значение по умолчанию.

Answer 1

смените пароль на пароль в setState

ваш код

handlePasswordChange(event) {
                this.setState({Password: event.target.value});
                console.log(this.state.password)
            }

новый код

handlePasswordChange(event) {
                this.setState({password: event.target.value});
                console.log(this.state.password)
            }

Answer 2

У вас есть опечатка в вашей функции:

handlePasswordChange(event) {
    this.setState({Password: event.target.value}); 
    // should be 
    this.setState({password: event.target.value}); 
    console.log(this.state.
}