Как использовать событие onClick в компоненте React Link?

84

Я использую компонент Link из маршрутизатора reactjs, и мне не удается заставить onClickevent работать. Это код:

<Link to={this.props.myroute} onClick='hello()'>Here</Link>

Это способ сделать это или другой способ?

reactjs react-router react-redux

— bier hier
источник

127

Вы передаете hello()строку, что также hello()означает helloнемедленное выполнение .

пытаться

onClick={hello}

— CodinCat
источник

32

Вы должны использовать это:

<Link to={this.props.myroute} onClick={hello}>Here</Link>

Или (если метод helloлежит в этом классе):

<Link to={this.props.myroute} onClick={this.hello}>Here</Link>

Обновление: для ES6 и последних версий, если вы хотите привязать какой-либо параметр с помощью метода щелчка, вы можете использовать это:

    const someValue = 'some';  
....  
    <Link to={this.props.myroute} onClick={() => hello(someValue)}>Here</Link>

— Виталий Андрусишин
источник

4

Или лучшеthis.hello.bind(this)

— webNeat

4

^ Фактически вы всегда должны связывать действия в конструкторе, так как привязка таким образом может привести к проблемам с производительностью.

— Nunchucks

1

Ссылка «на» обязательна, но часто мне просто нужен onClick (), в настоящее время я должен сделать что-то вроде <Link to="" onClick={this.delete}>Delete</Link>. Я желаю, чтобы "к" здесь необязательно.

— Newman

2

@newman Зачем использовать Linkбез to? Если он вам не нужен, просто используйте какой-нибудь другой компонент, например, <button>с onClickметодом, и все готово;).

— Guilherme Oderdenge

23

Я не верю, что это хороший шаблон для использования в целом. Link запустит ваше событие onClick, а затем перейдет к маршруту, поэтому при переходе к новому маршруту будет небольшая задержка. Лучшая стратегия - перейти к новому маршруту с опорой 'to', как вы это сделали, а в функции componentDidMount () нового компонента вы можете запустить свою функцию приветствия или любую другую функцию. Это даст вам тот же результат, но с гораздо более плавным переходом между маршрутами.

Для контекста, я заметил это при обновлении моего хранилища redux с помощью события onClick в Link, как здесь, и это вызвало задержку ~ 0,3 секунды перед установкой компонента нового маршрута. При этом не было вызова api, поэтому я был удивлен, что задержка была такой большой. Однако, если вы просто регистрируете консоль «привет», задержка может быть незаметна.

— Нунчаки
источник

У меня есть URL-адрес обратного вызова в моем текущем компоненте, который я сохраняю в файле cookie onClickперед переходом на новый маршрут. Я не получу этот URL-адрес обратного вызова в следующем компоненте, поэтому мне нужно сделать это до самого перехода. Есть ли альтернатива этому? PS: URL-адрес обратного вызова должен быть доступен даже после обновления, поэтому его можно сохранить в магазине.

— Parth Mistry

1

Если вы используете реагирующую навигацию: я бы сказал, не используйте Link, просто используйте TouchableOpacity или TouchableWithoutFeedback, тогда в вашей функции onPress вы можете перемещаться и передавать свой URL-адрес в качестве параметра навигации.

onPress={() => {             this.props.navigation.navigate('NameOfNextScreen', {               callbackUrl: 'http://.callbackUrl.com',             });

Если вы не используете реакцию-навигацию I просто использовал Link onClick и не беспокоился о небольшой проблеме с производительностью. Наверное, не будет заметно.

— Nunchucks

Хороший совет! Благодаря!

— aspiringsoftwaredev