Как использовать событие 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