Hướng dẫn how remove css property in react js? - cách xóa thuộc tính css trong phản ứng js?

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

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.

Hướng dẫn how remove css property in react js? - cách xóa thuộc tính css trong phản ứng js?

Đ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.

Hướng dẫn how remove css property in react js? - cách xóa thuộc tính css trong phản ứng js?

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.

Hướng dẫn how remove css property in react js? - cách xóa thuộc tính css trong phản ứng js?

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.

Hướng dẫn how remove css property in react js? - cách xóa thuộc tính css trong phản ứng js?

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.

Hướng dẫn how remove css property in react js? - cách xóa thuộc tính css trong phản ứng js?

Đ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

Làm thế nào thêm và loại bỏ lớp CSS trong React JS?

Để thêm hoặc xóa một lớp khi nhấp vào React:..
Đặt onclick prop trên phần tử ..
Truy cập phần tử DOM như sự kiện. Mục tiêu hiện tại ..
Sử dụng danh sách lớp. thêm () hoặc danh sách lớp. loại bỏ () phương thức ..

Các tệp CSS được lưu trữ trong React ở đâu?

Bạn có thể tạo một tệp CSS mới trong thư mục dự án của mình và thêm CSS của bạn bên trong nó.Sau đó, bạn có thể nhập tệp vào trang thành phần, lớp hoặc React JS của bạn.your project directory and add your CSS inside it. You can then import the file in your component, class, or React JS page.

React JS có sử dụng CSS không?

Thay vì sử dụng các kiểu nội tuyến, thông thường việc nhập bảng kiểu CSS để tạo kiểu cho các yếu tố của một thành phần.Viết CSS theo kiểu kiểu có lẽ là cách tiếp cận phổ biến và cơ bản nhất để tạo kiểu cho ứng dụng React, nhưng nó không nên được loại bỏ dễ dàng như vậy.it's common to import a CSS stylesheet to style a component's elements. Writing CSS in a stylesheet is probably the most common and basic approach to styling a React application, but it shouldn't be dismissed so easily.

Tại sao CSS không hoạt động trong React JS?

Lỗi này được tạo vì trình biên dịch chỉ có thể nhập các tệp từ thư mục SRC.Ở đây, tệp CSS được lưu bên ngoài thư mục SRC, vì vậy trình biên dịch không thể nhập nó.Để làm cho mã này hoạt động, bạn chỉ cần lưu tệp CSS bên trong thư mục SRC.the compiler is only able to import files from the src folder. Here, the CSS file is saved outside the src folder, so the compiler failed to import it. To make this code work, you just have to save the CSS file inside the src folder.