Hướng dẫn react unload css - phản ứng dỡ bỏ css

Tôi mới phản ứng. Tôi có một vài nút trong một nhóm nút:

     this.changeDataType("type1")} >Button1
     this.changeDataType("type2")} >Button2
     this.changeDataType("type3")} >Button3

Bất cứ khi nào người dùng nhấp vào một trong các nút, nút này sẽ trở thành nút được chọn, được chọn. Tôi phát hiện ra rằng tôi cần thêm lớp CSS

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

1 vào nút tương ứng, nhưng tôi không chắc chắn làm thế nào để thực hiện điều này.

Tôi đã nghĩ về điều này một chút. Tôi có chức năng

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

2 được kết nối với các nút của tôi, trong đó tôi làm một số thứ khác. Sau đó, tôi có thể điều khiển CSS không?

Vì vậy, tôi đoán câu hỏi của tôi là trước tiên, làm thế nào để nhắm mục tiêu nút tôi cần nhắm mục tiêu và thứ hai, làm thế nào tôi có thể thay đổi CSS của nút đó bằng React.

Chào mừng trở lại khóa học. Trong video này, chúng tôi sẽ thêm một số phần đệm vào lề của chúng tôi và chúng tôi sẽ tạo kiểu cho mũi tên và tôi cũng sẽ làm cho nó đi lên xuống. Hãy bắt đầu với việc tạo kiểu cho dòng.

Mở ra

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

3 và thêm các kiểu sau.

libraryCourse.scss

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

Bây giờ nếu chúng ta nhìn vào ứng dụng, chúng ta có thể thấy rằng lề dưới cùng hoạt động, nhưng không phải là biên độ cao nhất. Lý do cho điều này là khi nó nằm trên các hàng lưới sẽ không cho phép nó hoạt động. Vì vậy, hãy thay đổi điều đó thành

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

4.

Điều đó sẽ cho nhiều không gian. Chúng ta có thể thấy rằng cả lề trên và dưới đều hoạt động. Hãy chuyển sang mũi tên của chúng tôi. Điều này khá đơn giản, tất cả những gì chúng ta phải làm là thay đổi màu sắc và làm cho nó nhỏ hơn một chút. Mở

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

5 của chúng tôi và chúng ta hãy thay đổi nó thành

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

6 trên các kích thước.

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

Bây giờ chúng ta hãy làm cho nó hoạt hình bằng cách làm cho nó lật lại và ẩn mô tả. Đây sẽ là phần lớn của video này. Chúng tôi sẽ làm việc với JavaScript, không chỉ các kiểu, mà chúng tôi sẽ thêm các lớp vào mô tả để ẩn nó.

Chúng ta cần tìm ra cách chúng ta có thể làm điều này, chúng ta hãy đi đến thiết kế của chúng ta và chỉ xem cách mà các mũi tên đang chỉ ban đầu.

Vì vậy, có vẻ như các mũi tên đang chỉ xuống ban đầu và được đóng lại, vì vậy chúng tôi cần phải lật lại của chúng tôi khi đóng. Cập nhật

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

5 của bạn lên điều này:

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    transform: rotate(180deg);

    height: 0;
    width: 0;
  }

  .arrow-closed {
    transform: rotate(0deg);
  }

Vì vậy, sẽ có nó chỉ xuống lúc đầu. Bây giờ chúng ta hãy đi vào JavaScript để thiết lập nó khi chúng ta nhấp vào nó, nó xoay lên hoặc xuống dựa trên trạng thái của nó. Chúng tôi có thể làm điều này thông qua Redux, nhưng tôi không nghĩ rằng chúng tôi sẽ cần.

Mở tệp

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

8 của bạn. Chúng tôi sẽ thay đổi div thành thẻ 'A', không nên phá hỏng phong cách của chúng tôi. Bây giờ đó là thẻ 'A', chúng ta có thể cung cấp cho nó một

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

9 với chức năng mũi tên.

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {
  render() {
        return (
             onClick={() => console.log('trying to handle click')}className={`${this.props.className} arrow`}>
        )
    }
}

export default Arrow;

Khi chúng tôi nhìn vào trình duyệt của chúng tôi với bảng điều khiển mở, chúng tôi có thể thấy tin nhắn mỗi khi chúng tôi nhấp vào, vì vậy nó chắc chắn đang hoạt động.

Bây giờ, tất cả những gì chúng ta cần làm là làm cho nó lật. Chúng ta có thể thực hiện điều này bằng cách sử dụng JavaScript thuần túy. Nếu chúng tôi Google 'tài liệu JavaScript nhận phần tử' và nó dẫn chúng tôi đến phương thức

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

0. (Liên kết bên dưới) Tại trang web này, chúng tôi cũng có thể kiểm tra các ví dụ của họ về

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

0.

Ví dụ cho thấy khi bạn nhấp vào nút, văn bản sẽ thay đổi. Chúng ta cũng có thể thay đổi điều này để kiểm tra các ý tưởng khác nhau. Đây là một ví dụ cho nhu cầu của chúng tôi.

Điều này cho thấy rằng chúng ta có thể thêm và thay đổi tên lớp cho các yếu tố và chúng ta có thể sử dụng chúng với các chuyển tiếp cho hình ảnh động. Hãy sử dụng điều này trong

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

8 của chúng tôi.

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {

  constructor(props) {
    super(props)

    this.state = {
      status: false
    }
  }

  toggleArrow = function() {
    console.log('trying to toggle arrow');
  }.bind(this);

  render() {
        return (
             onClick={() => this.toggleArrow()}className={`${this.props.className} arrow`}>
        )
    }
}

export default Arrow;

Bây giờ chúng tôi đã thiết lập với các chức năng này để gọi nhau. Về cơ bản

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

9 là một hàm chứa chức năng của

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

4, vì vậy khi chúng tôi nhấp vào,

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

9 gọi

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

4. Khi chúng tôi kiểm tra điều đó trong trình duyệt, chúng tôi có thể thấy rằng nó hoạt động. Hãy cập nhật

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

8 của chúng tôi

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {

  constructor(props) {
    super(props)

    this.state = {
      status: false
    }
  }

  toggleArrow = function() {
    if(this.state.status) {
      //closes it
    } else {
      //opens it
    }
  }.bind(this);

  render() {
        return (
             onClick={() => this.toggleArrow()}className={`${this.props.className} arrow`}>
        )
    }
}

export default Arrow;

Bây giờ chúng ta hãy viết một số phong cách cho việc này. Theo mặc định, mũi tên của chúng tôi được xoay 180 độ và nó yêu cầu hai cuộc gọi biến đổi, đó không phải là thứ mà chúng tôi muốn cho mặc định của chúng tôi. Vì vậy, hãy thay đổi tệp của chúng tôi. Chúng tôi cũng cần phải lật điểm bắt đầu của mũi tên của chúng tôi.

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

  .arrow-closed {
    transform: rotate(180deg);
  }

Vì chúng tôi muốn mũi tên đóng là mặc định của chúng tôi, về mặt kỹ thuật, chúng tôi chỉ cần thêm và xóa tên lớp.

arrow.js

import React, { Component } from 'react';

class Arrow extends Component {

  constructor(props) {
    super(props)

    this.state = {
      status: false
    }
  }

  toggleArrow = function() {
    if(this.state.status) {
      //closes it
      document.getElementById('arrow').classlist.remove('arrow-closed');

    } else {
      //open
      document.getElementById('arrow').classlist.add('arrow-closed');
    }

    this.setState({ status: !this.state.status })
  }.bind(this);

  render() {
        return (
             id="arrow" onClick={() => this.toggleArrow()}className={`${this.props.className} arrow`}>
        )
    }
}

export default Arrow;

Bây giờ chúng tôi có các chức năng của chúng tôi, bạn có thể thấy rằng bằng cách thêm hoặc xóa lớp

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid $color-blue;

    height: 0;
    width: 0;
  }

8, chúng tôi sẽ có thể lật mũi tên. Chúng ta hãy truy cập trình duyệt của chúng tôi và kiểm tra nó. Nó lật, nhưng có vẻ như chúng ta đã có một lỗi và nó chỉ cho phép chúng ta lật mũi tên đầu tiên.

Chúng tôi sẽ đặt hình ảnh động của chúng tôi trước, sau đó tìm ra lỗi đó. Hãy mở ra

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

5 của chúng tôi

arrow.scss

  .arrow {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid $color-blue;

    height: 0;
    width: 0;

    transition: all .3s ease;
  }

  .arrow-closed {
    transform: rotate(180deg);
  }

Hãy thử điều này ngay bây giờ. Như bạn có thể thấy nó trông rất đẹp. Hãy cam kết mã của chúng tôi và trong video tiếp theo, chúng tôi sẽ sửa lỗi đó và xem chúng tôi có thể làm gì khác.

  &__line {
    border-bottom: 1px solid #F2f2f2;
    margin-top: 19px;
    margin-bottom: 24px;
  }

0

Hẹn gặp lại các bạn trong video tiếp theo.

Tài nguyên

Mã ở giai đoạn này

W3Schools.com JavaScript