Question

我是 React 新手，所以这可能是一个愚蠢的问题，但谁问的不会迷路。

所以，当我尝试输入某物时，在我输入两次后进行更新

例如

// 我在键盘上输入“a”

什么都看不见

// 我在键盘上第二次输入“a”

国家只看到一个字母a

这是我的代码：


    class Input extends React.Component {

        constructor(props) {
            super(props);
            this.state = { login: '', pass: '' };

            this.handleChange = this.handleChange.bind(this);
        }

        handleChange(event) {
                const target = event.target;
                const value = target.value;
                const name = target.name;

                this.setState({
                    [name]: value,
                });

                this.info = this.state.login + ' ' + this.state.pass;
        }

        render () {
            return (

                <>
                    <input name="login"  value={ this.state.login } onChange={ this.handleChange.bind(this) } placeholder="LOGIN" type="text"></input>
                    <input name="pass"  value={ this.state.pass }  onChange={ this.handleChange.bind(this) } placeholder="PASSWORD" type="text"></input>
                    <h3> { this.info } </h3>
                </>

            );
        }
    }

Answer 1

反应中状态的更新是异步的，这意味着如果您使用 this.SetState({a:1}); 更新状态；如果您立即尝试使用此代码 this.state.a 获取值，它可能会或可能不会更新，因此您将无法获得最新值，因此您应该避免它。相反，你可以这样做

 handleChange(event) {
                const target = event.target;
                const value = target.value;
                const name = target.name;
                let stateValue = this.state;
                stateValue[name] = stateValue[name] + value;
                
               
                this.setState({
                    [name]: value,
                });

                this.info = stateValue .login + ' ' + tstateValue .pass;
        }

Answer 2

如果更换

<h3> { this.info } </h3>

与

<h3> { this.state.login + ' ' + this.state.pass } </h3>

您会看到它如您所愿。

在第二次 onChange 后反应更新状态

2 个答案: