Я использую компонент Link из маршрутизатора reactjs, и мне не удается заставить onClickevent работать. Это код:
<Link to={this.props.myroute} onClick='hello()'>Here</Link>
Это способ сделать это или другой способ?
источник
Я использую компонент Link из маршрутизатора reactjs, и мне не удается заставить onClickevent работать. Это код:
<Link to={this.props.myroute} onClick='hello()'>Here</Link>
Это способ сделать это или другой способ?
Вы передаете hello()
строку, что также hello()
означает hello
немедленное выполнение .
пытаться
onClick={hello}
Вы должны использовать это:
<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>
Я не верю, что это хороший шаблон для использования в целом. Link запустит ваше событие onClick, а затем перейдет к маршруту, поэтому при переходе к новому маршруту будет небольшая задержка. Лучшая стратегия - перейти к новому маршруту с опорой 'to', как вы это сделали, а в функции componentDidMount () нового компонента вы можете запустить свою функцию приветствия или любую другую функцию. Это даст вам тот же результат, но с гораздо более плавным переходом между маршрутами.
Для контекста, я заметил это при обновлении моего хранилища redux с помощью события onClick в Link, как здесь, и это вызвало задержку ~ 0,3 секунды перед установкой компонента нового маршрута. При этом не было вызова api, поэтому я был удивлен, что задержка была такой большой. Однако, если вы просто регистрируете консоль «привет», задержка может быть незаметна.
onClick
перед переходом на новый маршрут. Я не получу этот URL-адрес обратного вызова в следующем компоненте, поэтому мне нужно сделать это до самого перехода. Есть ли альтернатива этому? PS: URL-адрес обратного вызова должен быть доступен даже после обновления, поэтому его можно сохранить в магазине.
onPress={() => { this.props.navigation.navigate('NameOfNextScreen', { callbackUrl: 'http://.callbackUrl.com', });
Если вы не используете реакцию-навигацию I просто использовал Link onClick и не беспокоился о небольшой проблеме с производительностью. Наверное, не будет заметно.
this.hello.bind(this)
<Link to="" onClick={this.delete}>Delete</Link>
. Я желаю, чтобы "к" здесь необязательно.Link
безto
? Если он вам не нужен, просто используйте какой-нибудь другой компонент, например,<button>
сonClick
методом, и все готово;).