当从 .map() 函数输出时，div 内的 onClick={handleClick} 不起作用答案

【问题标题】：onClick={handleClick} inside a div doesn't work when it's outputted from a .map() function当从 .map() 函数输出时，div 内的 onClick={handleClick} 不起作用
【发布时间】：2022-10-07 13:16:27
【问题描述】：

我有一个渲染输出，将我拥有的每个项目从数组映射到这样的 div

    var renderedOutput = arr.map(item => <div key={item.portfolioName} style={portfolioStyle} onClick={handleClick}> {item.portfolioName} </div>)

虽然 div 中的 key={...} 和 style={...} 工作得很好，使用 onClick={handleClick} 不行吗？我怎样才能解决这个问题？

这是我的其余代码：

export default function Sidebar(props){
    var user = props.user    
    var arr = user.user.portfolios
    
    const portfolioStyle = {
        textAlign: \"left\",
        border: \"1px\",
    }

    var renderedOutput = arr.map(item => <div key={item.portfolioName} style={portfolioStyle} onClick={handleClick}> {item.portfolioName} </div>)

    const handleClick = e => {
        alert(\'works\')
    }

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

我希望创建的功能：对于数组中的每个项目，都会创建一行

投资组合的名称，单击时将您引导至相应页面
编辑按钮和删除按钮
现在，我只是在 div 的 handleClick 中设置了一个警报，以测试它是否有效。但是什么也没发生，handleClick 永远不会运行

handleClick 怎么不起作用？您可以发布更多代码吗？
它是类组件还是函数组件？并且需要更多代码，例如handleClick 方法
我将handleClick 移到renderedOutput 上方，它对我有用。

标签： javascript reactjs jsx array.prototype.map

【解决方案1】：

此代码工作正常：

const object={
    user:
    {
      portfolios:
      [
        {portfolioName:'a'},
      {portfolioName:'b'}
    ]
    }
  };
export function Sidebar(props){
  var user = props.props.user;    
  var arr = user.portfolios;
  
  const portfolioStyle = {
      textAlign: "left",
      border: "1px",
  }
  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>
     </>
  )
}

【讨论】：

【解决方案2】：

它正在发生，因为它没有找到handleClick功能。您需要在初始化之前调用该函数renderedOutput.因此，像这样更新您的代码：

export default function Sidebar(props){
    var user = props.user    
    var arr = user.user.portfolios
    
    const portfolioStyle = {
        textAlign: "left",
        border: "1px",
    }

    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>
       </>
    )
}

【讨论】：

【解决方案3】：

它不起作用，因为渲染输出首先初始化，更改您的代码。移动手柄点击在渲染输出之前。

export default function Sidebar(props){
            var user = props.user    
            var arr = user.user.portfolios
            
            const portfolioStyle = {
                textAlign: "left",
                border: "1px",
            }
        
            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>
               </>
            )
        }

【讨论】：