Як використовувати подію onClick на компоненті Link Link?

84

Я використовую компонент Link з маршрутизатора responsejs, і я не можу змусити 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>. Я хотів би, щоб "тут" не є обов'язковим.

— Ньюмен

2

@newman Чому б ти використовував Linkбез to? Якщо вам це не потрібно, тоді просто будь-який інший компонент, такий як a <button>з onClickметодом, і ви готові піти;).

— Guilherme Oderdenge

23

Я не вірю, що це хороший шаблон для використання в цілому. Посилання запустить подію onClick, а потім перейде до маршруту, тому перехід до нового маршруту буде невеликим. Кращою стратегією є перехід до нового маршруту за допомогою підказки 'to', як це зроблено, а у функції componentDidMount () нового компонента ви можете запустити свою функцію привіт або будь-яку іншу функцію. Це дасть вам той самий результат, але з набагато плавнішим переходом між маршрутами.

Для контексту, я помітив це під час оновлення мого сховища redux подією onClick на Link, як у вас тут, і це спричинило ~ 0,3 секунди затримки порожнього білого екрану перед монтажем компонента нового маршруту. Не було залучено дзвінок API, тому я був здивований, що затримка була такою великою. Однак, якщо ви просто реєструєте консоль "привіт", затримка може бути не помітною.

— Нунчаки
джерело

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

— Parth Mistry

1

Якщо ви використовуєте реакцію навігації: я б сказав, не використовуйте посилання, просто використовуйте TouchableOpacity або TouchableWithoutFeedback, тоді у вашій функції onPress ви можете переміщатися і передавати свою URL-адресу як параметр

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

навігації. просто скористався посиланням onClick і не хвилюйтеся через незначну проблему продуктивності. Це, мабуть, не буде помітно.

— Nunchucks

Хороша порада! Дякую!

— aspiringsoftwaredev