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

我希望在输入类型password中使用密码状态，并且不想使用任何默认值。

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

无法在输入框中输入密码

2 个答案: