尝试使用onMouseDown而不是onClick。

关键是onBlur正在触发重新渲染，这似乎会导致浏览器不跟进onClick：https://github.com/facebook/react/issues/4210
但是如果你检查onBlur事件，你可以找到一些关于发生了什么的信息，event.relatedTarget被填充，你可以使用这些信息来检测onBlur何时被onClick触发，并链接你需要做的任何事情。

我刚刚在一个面包屑链接数组中遇到了这个问题，其中onBlur处理程序导致重新渲染，阻止链接点击工作。实际问题是react每次都会重新生成链接元素，所以当它重新渲染时，它会从鼠标下交换链接，这导致浏览器忽略点击。
修复方法是将key属性添加到我的链接中，以便react可以重用相同的DOM元素。

<ol>
    {props.breadcrumbs.map(crumb => (
        <li key={crumb.url}>
            <Link to={crumb.url} >
                {crumb.label}
            </Link>
        </li>
    ))}
</ol>

字符串

我也遇到了这个问题。对我有效的是这个弗兰肯斯坦式的解决方案：

onBlur={e => { 
    // regular onBlur code
    onBlurHandler(); // replace with your own onBlur event code handling

    // code to trigger button click event
    if(e.relatedTarget?.className.includes('save-button'){ // have to add a class to your save button like "save-button"
         const target = e.relatedTarget ? (e.relatedTarget as HTMLButtonElement): null; // can omit 'as HTMLButtonElement' if not in typescript
         target?.click(); // can omit the '?' if not in typescript
    }
}}

字符串
相当丑陋，但它的工作！希望它有助于其他一些可怜的灵魂困惑这一点。

我也有类似的问题，这里的建议都不太合适，所以我最终使用了setTimeout来稍微延迟blur事件。
在我的例子中，我使用的是一个输入组件，它在右边有一个可点击的“提交”按钮。只有当父对象被悬停在其中，和/或输入本身接收到焦点时，输入和按钮才会呈现。点击按钮会导致输入的onBlur触发，从而停止点击处理程序的运行。添加一个小的setTimeout解决了这个问题。

import { Fragment,useState } from "react";
import { FaArrowCircleRight, } from "react-icons/fa";
import {
    InputGroup,
    InputRightElement,
    Input,
    Box,
} from "@chakra-ui/react";

const HoverInput = props => {
    const [st_hovering,sst_hovering] = useState(false);
    const [st_focused,sst_focused] = useState(false);
    const [st_value,sst_value] = useState(props.savedValue || "");

    let handleChange = event=>{
        sst_value(event.target.value);
    };
    
    let handleSubmit = async (event)=>{
        event.preventDefault();
        // do stuff
    }; // handleSubmit

    return (
        <Box
            onMouseEnter={event=>sst_hovering(true)}
            onMouseLeave={event=>{
                if ( !st_focused ) {
                    sst_hovering(false);
                }
            }}
        >
            {
                !st_hovering ? (
                    <Fragment>{st_value}</Fragment>
                ) : (
                    <Box>
                        <InputGroup>
                            <Input
                                value={st_value}
                                onChange={handleChange}
                                onFocus={event=>sst_focused(true)}
                                onBlur={event=>{
                                    setTimeout(()=>{
                                        sst_focused(false);
                                    }, 100);
                                }}
                            />
                            <InputRightElement>
                                <FaArrowCircleRight
                                    cursor="pointer"
                                    onClick={handleSubmit}
                                />
                            </InputRightElement>
                        </InputGroup>
                    </Box>
                )
            }
        </Box>
    );
}

export default HoverInput;

字符串