Làm thế nào để sử dụng sự kiện onClick trên thành phần Liên kết phản ứng?

Tôi đang sử dụng thành phần Liên kết từ bộ định tuyến reactjs và tôi không thể làm cho onClickevent hoạt động. Đây là mã:

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

Đây là cách để làm điều đó hay cách khác?

Bạn đang chuyển hello()dưới dạng một chuỗi, cũng hello()có nghĩa là thực thi hellongay lập tức.

thử

onClick={hello}

Bạn nên sử dụng cái này:

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

Hoặc (nếu phương thức hellonằm ở lớp này):

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

Cập nhật: Đối với ES6 và phiên bản mới nhất nếu bạn muốn liên kết một số thông số với phương thức nhấp chuột, bạn có thể sử dụng điều này:

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

Tôi không tin rằng đây là một mô hình tốt để sử dụng nói chung. Liên kết sẽ chạy sự kiện onClick của bạn và sau đó điều hướng đến tuyến đường, vì vậy sẽ có một chút chậm trễ khi điều hướng đến tuyến đường mới. Một chiến lược tốt hơn là điều hướng đến tuyến đường mới với 'to' prop như bạn đã làm và trong hàm componentDidMount () của thành phần mới, bạn có thể kích hoạt hàm hello hoặc bất kỳ hàm nào khác. Nó sẽ cung cấp cho bạn kết quả tương tự, nhưng với sự chuyển đổi giữa các tuyến đường mượt mà hơn nhiều.

Đối với ngữ cảnh, tôi nhận thấy điều này khi cập nhật cửa hàng redux của mình với sự kiện onClick trên Liên kết như bạn có ở đây và nó gây ra độ trễ màn hình trắng-trắng ~ 0,3 giây trước khi gắn thành phần của tuyến đường mới. Không có cuộc gọi api nào liên quan, vì vậy tôi ngạc nhiên vì sự chậm trễ lớn đến vậy. Tuy nhiên, nếu bạn chỉ ghi nhật ký bảng điều khiển 'xin chào', sự chậm trễ có thể không đáng chú ý.