Question

我在React中遇到了一个小问题。我在项目中添加了以下扩展名：https://www.npmjs.com/package/react-contextmenu

你能解释一下为什么在＆＃34; MenuItem＆＃34;中的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>

您还需要在MenuItem Component中附加onClick作为道具。这是一个MenuItem示例，它将onClick附加为props：

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组件上工作以将子事件处理程序表示为props。您需要做的是在MenuItem本身中定义处理程序：

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

Answer 2

console.log是否在上下文菜单之外工作，你能先测试一下吗？

Answer 3

我做了一些研究，上下文菜单中有一个错误

这就是为什么上下文菜单中的开发人员建议：

function handleClick(e, data) {

的console.log（data.foo）; }

function MyApp（）{ 回来（

  <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>

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

4 个答案: