React中如何用直接传对象的this.setState更新状态并解决输入值无法存入state的问题

核心问题 #

• 对setState的执行时序存在认知偏差：React 的setState是异步批处理更新逻辑，调用后不会同步修改当前组件实例上的state属性。在调用setState后立刻执行的console.log(this.state)，只能读取到更新前的旧状态，并非输入值没有成功存入state。如果需要在状态更新完成后拿到最新值，需要给setState传入第二个参数作为更新完成的回调，在回调内读取state即可。
• DOM取值逻辑可靠性不足：通过e.target.previousElementSibling硬绑定按钮和相邻输入框的DOM关系来取值，完全脱离React声明式开发逻辑，只要输入框和按钮之间插入任意其他DOM节点，该取值逻辑就会直接失效，无法拿到正确的输入文本。

修复后的参考实现 #

class EditTextArea extends React.Component {
    constructor() {
        super();
        this.state = {
            message: "",
        };
        // 为输入框创建独立引用，无需依赖DOM相邻关系查找元素
        this.inputRef = React.createRef();
        this.handleButton = this.handleButton.bind(this);
    }

    handleButton(e) {
        // 直接通过绑定的ref获取输入框的文本内容
        const text = this.inputRef.current.value;
        this.setState(
            { message: text },
            // 状态更新完成的回调函数，可在此处获取最新的state值
            () => console.log("更新后的state：", this.state)
        );
    }

    render() {
        return (
            <div>
                <form>
                    <input 
                        type="text" 
                        name="customText" 
                        ref={this.inputRef}
                    />
                    <button type="button" onClick={this.handleButton}>
                        Send
                    </button>
                </form>
            </div>
        );
    }
}

ReactDOM.render(<EditTextArea />, document.getElementById("root"));

按照React推荐的受控组件写法，也可以给输入框绑定onChange事件实时同步输入值到state，点击按钮时直接读取state中存储的值即可，完全不需要操作底层DOM节点取值。

内容的提问来源于stack exchange，提问作者Shubham Maheshwari