Как мы можем сделать div, размещенный внутри тега ссылки, чтобы не перемещаться

Question

У меня есть плитка. Нажатие в любом месте на нем должно перенаправить на новую страницу. Я сохранил свой полный код внутри тега Link, чтобы всякий раз, когда я нажимал на любую часть этого элемента, он переходил на новую страницу. Но внутри этого тега Link есть подраздел, нажав на который я не хочу выполнять перенаправление. Проблема, с которой я сталкиваюсь, заключается в том, что если я закрою тег ссылки перед тем конкретным 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>

Я хочу, чтобы второй div с заголовком «Просмотр HTML» не перенаправлялся.

Answer 1

Передайте history вашему компоненту в качестве реквизита, затем используйте 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

Вам необходимо использовать event.stopPropagation на onClick из div, который вы хотите прекратить перенаправлять.

Если у вас есть вложенные теги, если вы щелкнете по одному тегу, вы активируете тег 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>

Но если вы используете event.stopPropagation для детей div. Родительский тег не будет вызывать событие 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() к onClick div, который вы не хотите запускать Link onClick.

Edit:

В вашем коде есть что-то очень странное

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>