React中map渲染的div绑定onClick无响应，求解决方案

你的onClick不生效的核心原因是变量声明顺序问题：你在定义handleClick函数之前，就已经创建了renderedOutput渲染数组，此时handleClick还未初始化，div上绑定的是undefined，点击自然不会触发任何操作。

修复步骤 #

1. 调整函数声明顺序：把handleClick的定义移到renderedOutput之前，确保创建元素时函数已存在：

export default function Sidebar(props){
    var user = props.user    
    var arr = user.user.portfolios
    
    const portfolioStyle = {
        textAlign: "left",
        border: "1px solid #ccc", // 补充完整border属性，否则样式不生效
        padding: "8px 12px", // 可选，增加内边距扩大点击区域
        cursor: "pointer" // 可选，鼠标移至上方显示手型，提示可点击
    }

    // 先定义点击事件函数
    const handleClick = e => {
        alert('works')
    }

    // 再创建渲染数组
    var renderedOutput = arr.map(item => <div key={item.portfolioName} style={portfolioStyle} onClick={handleClick}> {item.portfolioName} </div>)

    return (
       <>
         <div>
             {renderedOutput}
         </div>
       </>
    )
}

针对你期望的功能扩展 #

如果要实现跳转、编辑和删除按钮，可参考以下修改：

export default function Sidebar(props){
    var user = props.user    
    var arr = user.user.portfolios
    
    const portfolioStyle = {
        textAlign: "left",
        border: "1px solid #ccc",
        padding: "8px 12px",
        margin: "4px 0",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        cursor: "pointer"
    }

    const handlePortfolioClick = (portfolioName) => {
        // 此处实现跳转逻辑，例如使用react-router的useNavigate：
        // navigate(`/portfolio/${portfolioName}`)
        alert(`跳转到${portfolioName}页面`)
    }

    const handleEdit = (item, e) => {
        e.stopPropagation(); // 阻止事件冒泡，避免触发父元素的跳转事件
        alert(`编辑${item.portfolioName}`)
    }

    const handleDelete = (item, e) => {
        e.stopPropagation();
        if(confirm(`确定删除${item.portfolioName}吗？`)){
            // 此处实现删除逻辑
            console.log(`删除${item.portfolioName}`)
        }
    }

    var renderedOutput = arr.map(item => (
        <div 
            key={item.portfolioName} 
            style={portfolioStyle} 
            onClick={() => handlePortfolioClick(item.portfolioName)}
        >
            <span>{item.portfolioName}</span>
            <div>
                <button onClick={(e) => handleEdit(item, e)} style={{marginRight: "8px"}}>编辑</button>
                <button onClick={(e) => handleDelete(item, e)}>删除</button>
            </div>
        </div>
    ))

    return (
       <>
         <div>
             {renderedOutput}
         </div>
       </>
    )
}

关键注意点：

• 使用箭头函数传递参数，方便获取当前portfolio的信息
• 编辑/删除按钮调用e.stopPropagation()，避免点击按钮时触发父元素的跳转事件
• 补充完整样式，让布局更合理直观

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