React / JSX не принимает мой обработчик onClick, тогда как basi c HTML делает - PullRequest
Новая
       12

React / JSX не принимает мой обработчик onClick, тогда как basi c HTML делает

0 голосов
/ 10 июля 2020

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

Это обычный HTML (он работает): 

<a href="https://google.fr">
  Go to google
  <span onclick="console.log('toto'); return false;">
    | Stay on current page
  </span>
</a>

Однако , с этой версией response 16.2 ссылка google перехватывает событие до диапазона: 

const Link = () =>
  <a href="https://google.fr">
    Go to google
    <span onClick={(e) => {console.log('toto'); return false;}}>
      | Stay on current page
    </span>
  </a>;

ReactDOM.render(<Link />, document.getElementById('root'));

Вы знаете, как это исправить? (и почему это происходит)

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Syntheti c События

Начиная с версии 0.14, возврат false из обработчика событий больше не останавливает распространение события. Вместо этого e.stopPropagation() или e.preventDefault() следует запускать вручную, в зависимости от ситуации. 

const Link = () =>
  <a href="https://google.fr">
    Go to google
    <span
      onClick={e => {
        e.preventDefault(); // for good measure
        e.stopPropagation();
        console.log('toto');
      }}
    >
      | Stay on current page
    </span>
  </a>;
0 голосов
/ 10 июля 2020

В этом примере работает решение Дрю Риза. Однако в реальном приложении (среда смешанного реагирования 16.2 / angular) angular улавливает собственное клиентское событие до того, как React испускает свое событие syntheti c.

Мне пришлось использовать ссылку для обработки родное событие dom. 

class Link extends React.Component {
  componentDidMount() {
    this.ref.addEventListener('click', e => { 
      e.preventDefault();
      e.stopPropagation();
    });
  }
  
  render() {
    return (
      <a href="https://google.fr">
        Go to google
        <span ref={(ref) => {this.ref = ref}}>
          | Stay on current page
        </span>
      </a>
    );
  }
}
...