Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Làm cách nào để cuộn đến div onClick bằng React?

In lại Tác giả: Taklimakan Thời gian cập nhật: 2023-11-02 22:06:37 25 4
mua khóa gpt4 Nike

Có một điều hướng cố định trong ứng dụng này mà tôi đang xây dựng bằng React. Điều tôi đang cố gắng tìm ra là cách sử dụng trênClick cuộn đến div đó? tôi đang sử dụng window.scrollTo 方法。

Các div trên trang có ID thẻ liên kết tương ứng. 

xử lýClick = e => {
    this.setState({
        phần hoạt động: e.target.id,
    });
    hãy để các phần = document.querySelectorAll('.deal-details__container');

    window.scrollTo({
        hàng đầu: 690,
        hành vi: 'trơn tru',
    });
};

Đánh dấu của tôi trông như thế này:


 this.handleClick('overview')}>
    Tổng quan

Đây là một trong những thành phần tôi cần cuộn đến:

nhập React từ 'Reac';
import { dealType } from '../../../../core/types';
nhập SpecsGroup từ './SpecsGroup';
nhập SpecsTabButton từ './SpecsTabButton';
nhập { Row, Col, Container } từ 'reactstrap';
nhập { groupBy, filter, map, toPairs, pipe, prop, zipObj } từ 'ramda';



xuất lớp mặc định Thông số kỹ thuật mở rộng React.PureComponent {
    ScrollRef = React.createRef();

    propTypes tĩnh = {
        thỏa thuận: dealType.isRequired,
    };

    trạng thái = {
        activeTab: 'khả năng',
        danh mục hoạt động: null,
    };

    bộ lọcSpecs() {
        const groupByCategories = pipe(
            bộ lọc (mục => {
                nếu như (
                    this.state.activeTab === 'khả năng' &&
                    khả năngCategories.includes(item.category)
                ) {
                    trả về đúng sự thật;
                }

                nếu như (
                    this.state.activeTab === 'tính năng' &&
                    featureCategories.includes(item.category)
                ) {
                    trả về đúng sự thật;
                }

                trả về sai;
            }),
            groupBy(prop('category')),
            toPairs,
            map(zipObj(['category', 'values']))
        );


    return groupByCategories(this.props.deal.equipment);
}

chuyển đổiActiveTab(tab) {
    if (this.state.activeTab !== tab) {
        this.setState({
            tab hoạt động: tab,
            danh mục hoạt động: null,
        });
    }
}

chuyển đổiActiveCategory(category) {
    if (this.state.activeCategory !== thể loại) {
        this.setState({
            hoạt độngDanh mục: danh mục,
        });
    } khác {
        this.setState({
            danh mục hoạt động: null,
        });
    }
}

render() {
    nếu như (
        !this.props.deal.equipment ||
        this.props.deal.equipment.length === 0
    ) {
        trả về sai;
    }

    return (
        

            
                
                    
                        
 Thông số kỹ thuật 

                    
                
                
                    
                        
                            
                                isActive={
                                    this.state.activeTab === 'khả năng'
                                }
                                nhãn="Khả năng"
                                giá trị="khả năng"
                                handOnClick={this.toggleActiveTab.bind(
                                    cái này
                                )}
                            />
                            
                                isActive={
                                    this.state.activeTab === 'tính năng'
                                }
                                nhãn="Tính năng"
                                giá trị="tính năng"
                                handOnClick={this.toggleActiveTab.bind(
                                    cái này
                                )}
                            />
                        
                        
                            thỏa thuận={this.props.deal}
                            danh mục={this.state.activeTab}
                            activeCategory={this.state.activeCategory}
                            thông số kỹ thuật={this.filterSpecs()}
                            chuyển đổiActiveCategory={this.toggleActiveCategory.bind(
                                cái này
                            )}
                        />
                    
                
            
        

    );
}
 }

Tôi vẫn đang học React và JS. Vì vậy, tôi có thể đang làm điều gì đó sai. Tôi đã đọc về giới thiệu nhưng không chắc liệu những điều này có tốt hơn/tệ hơn không.

Cảm ơn sự giúp đỡ nào!

câu trả lời hay nhất

Bạn có thể sử dụng hệ thống trích dẫn của React, hệ thống này cho phép bạn truy cập vào Các phần tử và hoạt động của DOM.

Vì vậy, trong mã của bạn, bạn có thể làm điều này:

lớp myComponent mở rộng React.Component{
    hàm tạo (đạo cụ) {
       super(props)
       this.state = {
          trường: giá trị
       }
       // tạo một tham chiếu cho phần tử của bạn để sử dụng
       this.myDivToFocus = React.createRef()
    }

    handOnClick = (sự kiện) => {
        //.current là xác minh rằng phần tử của bạn đã được hiển thị
        if(this.myDivToFocus.current){
            this.myDivToFocus.current.scrollIntoView({ 
               hành vi: "trơn tru", 
               khối: "gần nhất"
            })
        }
    }

    render(){
       return(
          
          

              Chào mừng đến với phần của tôi
          


       )
    }

}

Làm cách nào để cuộn đến div onClick bằng React? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/54245395/

25 4 0
Bài viết khuyến nghị: iOS swift: Các ràng buộc không cập nhật trên màn hình
Bài viết khuyến nghị: ViewControllers thiết lập UITabBarController trên nhãn đặt sai vị trí của iPhoneX
Bài viết khuyến nghị: Có cách nào để gọi hàm mũi tên ngay sau khi nó được khai báo không?
Bài viết khuyến nghị: Cách xây dựng máy chủ thông báo đẩy Android bằng PHP
Taklimakan
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress