我们如何使放置在链接标签内的 div 不被导航

Question

我有一块瓷砖。单击它的任何地方都应该重定向到一个新页面。我将完整的代码保存在 Link 标记中，这样每当我单击该 div 的任何部分时，它都会导航到新页面。但是在那个链接标签里面，有一个细分，点击它我不想执行重定向。 我面临的问题是，如果我将在我不想执行重定向的特定 div 之前关闭链接标签，则父 div 的剩余区域也变得不可点击，除了写入的 p 标签。我如何才能使那个特定的 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>

我想让标题为“查看 HTML”的第二个 div 不可重定向。

Answer 1

将 history 作为 prop 传递给您的组件，然后使用 push 重定向或停止事件

e.stopPropagation();

示例：

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

Answer 2

您需要在要停止重定向的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。

编辑：

你的代码有些奇怪

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>