React-Contextmenu-console.log（）不起作用

Question

我在React中有一個小問題。 我在項目中添加了以下擴展： https : //www.npmjs.com/package/react-contextmenu

您能解釋一下為什么“ MenuItem”內部的console.log無法正常工作，但在外部卻有效嗎？

<ContextMenu id="test">
   <MenuItem>
    {/* no console log :( */}
    <a onClick={(e)=>{e.preventDefault();console.log('Inside MenuItem');}}>Click Me</a>
   </MenuItem>
    {/* console log works */}
    <a onClick={(e)=>{e.preventDefault();console.log('Inside MenuItem');}}>Click Me</a>
</ContextMenu>

Answer 1

您需要防止鏈接的默認行為：

 
 
 
  
  <a onClick={(e)=>{e.preventDefault();console.log('Inside MenuItem');}}>Click Me</a>
 
  

您還需要在菜單項組件內將onClick作為道具附加。 這是MenuItem的示例，它將onClick附加為道具：

 
 
 
  
  const MenuItem = props => { // ...other holds all other props except desiredProps const { disiredProps, ...other } = props; // ...other holds onClick props return <div {...other}>{other.children}</div> // ^^ onClick is passed as props }
 
  

由於MenuItem組件是react-contextmenu的一部分，因此您不能在子代內部分配事件處理程序，因為您不能直接在MenuItem組件上將子事件處理程序表示為道具。 您需要做的是在MenuItem本身中定義處理程序：

 <MenuItem onClick={(e) => {e.preventDefault();e.stopPropagation();console.log('Inside MenuItem');}}> <a>Click MenuItem</a><!-- though unnecessary link tag --> </MenuItem> 

Answer 2

console.log是否可以在上下文菜單之外工作，您可以先對其進行測試嗎？

Answer 3

我做了一些研究，上下文菜單中有一個錯誤

這就是為什么“上下文”菜單中的開發人員建議這樣做的原因：

function handleClick(e, data) {

console.log（data.foo）; }

函數MyApp（）{return（

  <ContextMenuTrigger id="some_unique_identifier">
    <div className="well">Right click to see the menu</div>
  </ContextMenuTrigger>

  <ContextMenu id="some_unique_identifier">
      <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>
      ContextMenu Item 1
    </MenuItem>
    <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>
      ContextMenu Item 2
    </MenuItem>
    <MenuItem divider />
    <MenuItem data={{foo: 'bar'}} onClick={this.handleClick}>
      ContextMenu Item 3
    </MenuItem>
  </ContextMenu>

</div>

）; }

要使用不同的方法在外部進行console.log，

查看git isue

https://github.com/vkbansal/react-contextmenu/issues/161

沒有提供解決方案，而且這是不久前的，所以我不認為您重新編碼是錯誤的。

Answer 4

嘗試這種方式：

<ContextMenu id="test">
   <MenuItem onClick={(e)=>{e.preventDefault();console.log('Inside MenuItem');}}>
    Click Me
   </MenuItem>
</ContextMenu>