React 是否会在状态更改时丢弃排队的事件？

Question

我正在制作一个带有简单验证的 React 表单组件。每个字段都经过模糊验证，表单有一个简单的onSubmit 函数。布尔值存储在关于字段是否应显示错误消息的状态中，并在验证期间更新。

除了字段的onBlur 和表单的`onSubmit 同时触发外，一切正常。即，我在字段中输入内容并立即单击提交按钮。

首先执行onBlur，如果验证状态没有发生变化，则按预期执行onSubmit。然而，如果onBlur 改变了状态，那么onSubmit 函数永远不会被调用。

所以我的问题是；在组件中设置状态会清除任何排队的事件吗？是否有任何可能的解决方案？

这是我的代码的简化版本：

class SimpleForm extends React.Component {
    constructor(props) {
        super(props);

        this.handleBlur = this.handleBlur.bind(this);

        this.state = { shouldShowError: false }
    }

    handleBlur(event) {
        console.log("blur")

        const isEmpty = event.target.value === ""

        this.setState({ shouldShowError: isEmpty })
    }

    handleSubmit(event) {
        event.preventDefault()

        console.log("submit")
    }

    render() {
        return ( 
            < form onSubmit = { this.handleSubmit} >
                < input type = "text" onBlur = { this.handleBlur } /> 
                { this.state.shouldShowError ? < p > This field is required. < /p> : null } 
                < button type = "submit" > Submit < /button > 
            < /form>
        )
    }
};

ReactDOM.render(< SimpleForm / >, document.getElementById('container'));

还有一个JSFiddle，它应该可以让您自己查看错误。任何帮助都将不胜感激。

Answer 1

感谢 Manolo 证实了我的怀疑，即擦除事件队列的是状态更改。我想我已经找到了一个暂时可行的解决方案：

如果你需要同时执行 onBlur 和 onSubmit 主体，你可以将 onBlur 主体包裹在一个 setTimeout 中，这样它就会被放到任务队列中，并在 onSubmit 之后执行：

handleBlur(event) {
    const value = event.target.value

    setTimeout(() => {
        console.log("blur")

        const isEmpty = value === ""

        this.setState({ shouldShowError: isEmpty }) 
    }, 10)
}

请注意，在 react 中，默认情况下您不能异步访问事件，因此您需要在超时之外提取所需的值，或者调用 event.persist()。

我不需要执行 onBlur 主体，因为我的 onSubmit 也会验证表单。经过一番阅读，我发现您可以调用 event.relatedTarget 来访问焦点转移到的组件。所以我可以检查它是否是提交按钮，如果不是，则只执行 onBlur 正文：

handleBlur(event) {
    if (!event.relatedTarget || event.relatedTarget.id !== 'submit') {
        console.log("blur")

        const isEmpty = event.target.value === ""

        this.setState({ shouldShowError: isEmpty }) 
    }
}

Answer 2

是的，更改组件中的状态会清除所有排队的事件，因为状态更改会导致整个组件重新渲染，并且事件将被清除并重新-附上。

我会在提交事件回调中进行验证，而不是模糊一个。如果您想在用户输入时进行验证，可以使用onKeyUp。

如果您想保留示例行为，可以在显示错误且没有错误时在onBlur 回调中提交表单：

class SimpleForm extends React.Component {
    constructor(props) {
        super(props);

        this.handleBlur = this.handleBlur.bind(this);

        this.state = { shouldShowError: false }
    }

    handleBlur(event) {
        console.log("blur")

        const isShowingError = this.state.shouldShowError;
        const isEmpty = event.target.value === ""

        if (isShowingError && !isEmpty) {
          console.log("submit the form");
        }
        this.setState({ shouldShowError: isEmpty })
    }

    handleSubmit(event) {
        event.preventDefault()

        console.log("submit")
    }

    render() {
        return ( 
          < form onSubmit = { this.handleSubmit} >
                < input type = "text" onBlur = { this.handleBlur } /> 
                { this.state.shouldShowError ? < p > This field is required. < /p> : null } 
                < button type = "submit" > Submit < /button > 
            < /form>
        )
    }
};

ReactDOM.render(< SimpleForm / >, document.getElementById('container'));

https://jsfiddle.net/2r9ua1n1/3/