Javascript 如何防止reactjs中的外部函数调用

这是我的代码

OuterOne = () => {
  alert("outer calling")
}

InnerOne = (ev) => {
  ev.stopPropagation()
  alert("here")
  console.log(ev.target)
}

<div onRightClick={()=>this.OuterOne()}>
   Outer
   <br/>
   <div onRightClick={(ev)=>this.InnerOne(ev)} style={{ margin:"10px" }}>
     INner
   </div>
</div>

我有两个功能

一个是内在的，另一个是外在的。当我调用内部函数时，它调用外部函数，因为内部div 被包裹在外层舱内

我只想在单击内部时调用内部函数，在单击外部div时调用外部函数

和我用javascript测试的一样，它可以工作，但不能使用react.js

有没有办法做到这一点

---

请看一看。

它工作得非常好

从“React”导入React； 常量应用程序：React.FC==>{ 常数OuterOne=e=>{ e、 防止违约； e、 停止传播； 警报“外部呼叫”； }; const InnerOne=e=>{ e、 防止违约； ev.停止传播； 警惕“这里”； console.loge.target； }; 回来 外面的 内部的 ; }; 导出默认应用程序； 以下是基于类的组件：

import React from 'react';

class App extends React.Component{
  OuterOne = (e) => {
    e.preventDefault();
    e.stopPropagation();
    alert('outer calling');
  };

  InnerOne = (e) => {
    e.preventDefault();
    e.stopPropagation();

    console.log(e.button);
    alert('here');
    console.log(e.target);
  };

  render() {
    return (
      <div>
        <div onContextMenu={this.OuterOne}>
          Outer
          <br />
          <div
            onContextMenu={this.InnerOne}
            style={{ margin: '10px' }}
          >
            Inner
          </div>
        </div>
      </div>
    );
  }
}

export default App;

只需使用onContextMenu而不是右键单击

---

它工作得非常好

从“React”导入React； 常量应用程序：React.FC==>{ 常数OuterOne=e=>{ e、 防止违约； e、 停止传播； 警报“外部呼叫”； }; const InnerOne=e=>{ e、 防止违约； ev.停止传播； 警惕“这里”； console.loge.target； }; 回来 外面的 内部的 ; }; 导出默认应用程序； 以下是基于类的组件：

import React from 'react';

class App extends React.Component{
  OuterOne = (e) => {
    e.preventDefault();
    e.stopPropagation();
    alert('outer calling');
  };

  InnerOne = (e) => {
    e.preventDefault();
    e.stopPropagation();

    console.log(e.button);
    alert('here');
    console.log(e.target);
  };

  render() {
    return (
      <div>
        <div onContextMenu={this.OuterOne}>
          Outer
          <br />
          <div
            onContextMenu={this.InnerOne}
            style={{ margin: '10px' }}
          >
            Inner
          </div>
        </div>
      </div>
    );
  }
}

export default App;

只需使用onContextMenu而不是右键单击

---

正如Ajay Dabas所说，onRightClick无法识别，我编辑并使用了onClick处理程序，它工作正常

OuterOne = () => {
    alert("outer calling")
}

InnerOne = (ev) => {
    ev.stopPropagation()
    alert("here")
    console.log(ev.target)
}
render() {
    return (
        <div onClick={() => this.OuterOne()}>
            Outer
 <br />
            <div onClick={(ev) => this.InnerOne(ev)} style={{ margin: "10px" }}>
                INner
 </div>
        </div>
    )
}

---

正如Ajay Dabas所说，onRightClick无法识别，我编辑并使用了onClick处理程序，它工作正常

OuterOne = () => {
    alert("outer calling")
}

InnerOne = (ev) => {
    ev.stopPropagation()
    alert("here")
    console.log(ev.target)
}
render() {
    return (
        <div onClick={() => this.OuterOne()}>
            Outer
 <br />
            <div onClick={(ev) => this.InnerOne(ev)} style={{ margin: "10px" }}>
                INner
 </div>
        </div>
    )
}

---

onRightClick在react中未被识别为事件处理程序。我将您的代码放到了中，在修复了click处理程序后，它似乎可以正常工作。是否有一种方法可以证明一个工作沙箱或演示重现您的问题？这是否回答了您的问题？是，在react中，使用onContextMenuonRightClick未被识别为事件处理程序。我将您的代码放到了中，并且在修复click处理程序后，它似乎能按预期工作。是否有一种方法可以证明一个工作沙箱或演示重现您的问题？这是否回答了您的问题？是的，使用onContextMenuI需要使用OnRightClick实现，您可以将其转换为基于类的组件吗？我也添加了这一点，请检查我需要使用OnRightClick实现，您可以将其转换为基于类的组件吗