如何使放置在链接标签内的 div 无法导航

Question

我有一个瓷砖。 点击上面的任何位置都应该重定向到新页面。我已经将完整的代码放在Link标签内，这样每当我点击该div的任何部分时，它都会导航到新页面。 但是，在Link标签中，有一个subdiv，我不想执行重定向操作。

我面临的问题是，如果我在不想执行重定向的特定div之前关闭链接标记，则除了编写的p标签外，父div的其余区域也变得不可单击。 如何使仅该特定div无法重定向。

       <Link to={{ pathname: '/demo_summary/'>
            <div className="ctd-tile" style={{ margin: "10px", height"260px" }}>
              <p>VERSION: {i.version}</p><br />
              <p>Complexity: {i.complexity}</p><br />

              <div className="col-md-4">}}>
                  <img src={require("../images/icon1.png")} title="DEMO PLAN" /></Link>
              </div>

              <div className="col-md-4">
                <input type="image"  title="View HTML" src={require("../images/viewAsHtml.png")} style={{width: "40%", cursor: "pointer"}} onClick={(e) => { e, that.openReport(e, i.demoName) }}/>
              </div>

              <div className="col-md-4">
                <Download file={i.name} content={text}>
                  <img src={require("../images/download.png")} title="DOWNLOAD" style={{ width: "25%", cursor: "pointer" }} />
                </Download>
              </div>
            </div>
          </Link>

我想使第二个div的标题为"查看HTML"的无法重定向。

- user11415630

Answer 1

你需要在想要停止重定向的 div 的 onClick 上使用 event.stopPropagation。

当你有嵌套标签时，如果你点击一个标签，你将会触发该标签的 onClick 和父级标签的 onClick。

function App() {

  return (
    <div onClick={() => console.log('parent onClick')} >
      <button onClick={() => console.log('button click')}>Click me</button>
    </div>
  )
}

const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

但是如果你在子div上使用event.stopPropagation，那么父标签就不会触发onClick事件。

function App() {

  return (
    <div onClick={() => console.log('parent onClick')} >
      <button onClick={e => {
        e.stopPropagation()
        console.log('button onClick')
        }}>Click me</button>
    </div>
  )
}

const rootElement = document.getElementById("app");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="app"></div>

现在你知道了，只需将e.stopPropagation()添加到您不想触发Link的onClick的div中。

编辑：

您的代码有一些非常奇怪的东西。

onClick={(e) => { e, that.openReport(e, i.demoName) }} // ????

但是你应该做的是

onClick={(e) => { 
    e.stopPropagation();
    that.openReport(e, i.demoName);
}}

以下是完整代码

<div className="col-md-4"             
    onClick={(e) => { 
          // added stopPropagation in the correct place
          e.stopPropagation();
          that.openReport(e, i.demoName);
     }}
>
    <input 
        type="image"  
        title="View HTML" 
        src={require("../images/viewAsHtml.png")} 
        style={{width: "40%", cursor: "pointer"}} 
        onClick={(e) => { 
          // added stopPropagation in the correct place
          e.stopPropagation();
          that.openReport(e, i.demoName);
        }}
    />
</div>

- Vencovsky

---

e.stopPropagation() 没有帮助 - user11415630

@AnjaliChaudhary，请检查代码片段。父元素将是“Link”，按钮将是不重定向的div。如果不起作用，请解释您正在做什么，也许您将其添加到了错误的位置。 - Vencovsky

它仍然在进行重定向。 - user11415630

是的，我也想在图片上添加stopPropagation。 - user11415630

你能在 CodeSandbox 或类似的平台上提供你的代码吗？ - Vencovsky

Answer 2

将history作为属性传递给您的组件，然后使用push进行重定向或使用stop事件。

e.stopPropagation();

例子：

const navigation = ({ history }) => {
      return (
        <div>
          <a
            onClick={() => {
              history.push("/cool");
            }}
          >
            rediction
            <span
              onClick={e => {
                e.stopPropagation();
              }}
            >
              none redirection
            </span>
          </a>
        </div>
      );
    };

- Aziz.G