onChange 文本框值未使用 React 以 HTML 形式更新

Question

用户名和密码更改事件被调用，但它没有出现在 UI 文本框中。代码如下：

class Login extends Component{
constructor(props){
    super(props)
    this.state= {
        username: 'username',
        password: 'password'
    }

}

handleUsernameChange = (event) => {
    console.log(event.target.value);
    this.setState = ({
        username: event.target.value
    });
}

handlePasswordChange = (event) => {
    this.setState = ({
        password: event.target.value
    })
}

render(){
    return(
        <div>
            User Name: <input type="text" name="username" value={this.state.username} onChange={this.handleUsernameChange}></input>
            Password: <input type="password" name="password" value={this.state.username} onChange={this.handlePasswordChange} />
            <button>Login</button>
        </div>
    )
}
}
export default Login

控制台正在记录更新的用户名，但我无法在 UI 中看到它。如果我遗漏了什么，请告诉我。提前致谢。

Answer 1

好的，所以您在这里遇到了几个问题。第一个是您通过尝试将其分配给某个值而错误地调用了“this.state”方法。所以你应该把this.setState = ({})改成this.setState({})。

第二个是您将 this.state.username 的值两次分配给两个输入，而不是为相应的输入分配正确的值。

最后一个错误，也是一个棘手的错误，是您错误地将函数分配给 onChange 事件。如果您分配的函数没有对类对象实例的任何引用，那就没问题了。但是由于您的函数具有对实例的引用（引用是关键字“this”，它引用了调用函数的类的实例），您需要将函数绑定到对象，以便在调用函数时， 'this' 关键字知道您要将状态更改为哪个对象。所以你必须把onChange={this.handleUsernameChange}改成onChange={this.handleUsernameChange.bind(this)}

Answer 2

将this.setState = ({ 更改为this.setState({

this.setState({
    username: event.target.value
})

并将密码输入值从value={this.state.username}更改为value={this.state.password}