第二次 onChange 后反应更新状态

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

React 中的状态更新是异步的，这意味着如果您使用 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 后反应更新状态

React update state after second onChange

onchange

event-handling

setstate

reactjs

react-component