Tiếp tục với series React Tips - giúp bạn hoàn thiện và viết ứng dụng React tốt hơn.

Xem lại các phần trước: Part 1, Part 2.

Đặt Body Styles với React

Trong React Component, chúng ta có thể thiết lập style cho body bằng JavaScript.

Ví dụ, chúng ta có thể viết:

componentDidMount(){
  document.body.style.backgroundColor = "green";
}

componentWillUnmount(){
  document.body.style.backgroundColor = null;
}

Chúng ta đặt thuộc tính document.body.style.backgroundColor để đặt màu nền.

componentDidMount cho phép chạy mã khi component được mount. 

componentWillUnmount chạy khi component bị unmount.

Tạo một React Modal

Chúng ta có thể sử dụng tính năng portal của React để hiển thị component của mình ở bất kỳ đâu.

Bằng cách này, chúng ta có thể tạo một modal gắn với bất kỳ phần tử nào chúng ta muốn.

Ví dụ, chúng ta có thể viết:

const ModalComponent = ({ children, onClose }) => {
  return createPortal(
    <div className="modal" onClick={onClose}>
      {children}
    </div>,
    document.getElementById("portal")
  );
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false
    };
  }

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ showModal: true })}>
          Open modal
        </button>
        {this.state.modalOpen && (
          <ModalComponent onClose={() => this.setState({ showModal: false })}>
            <h1>modal content</h1>
          </ModalComponent>
        )}
      </div>
    );
  }
}

Chúng ta tạo một component ModalComponent để cho phép lồng nội dung vào bên trong nó. 

Chúng ta có thể làm điều đó vì nó sử dụng  children component.

Tất cả những gì chúng ta phải làm là tạo children prop.

Chúng ta sử dụng phương thức createPortal của React để cho phép chúng ta hiển thị div ở bất kỳ đâu chúng ta muốn.

Trong Ứng dụng, chúng ta đã tạo một nút để cho phép mở modal.

Để làm điều đó, chúng ta đặt trạng thái showModal thành true.

Chúng ta cũng tạo một hàm mà chúng ta chuyển vào thuộc tính onClose của ModalComponent để showModal có thể được đặt thành false.

Thao tác này sẽ đóng modal vì ModalComponent chỉ được hiển thị khi showModal là true.

Xóa và đặt lại các biểu mẫu Input Fields

Nếu chúng ta có một biểu mẫu có đặt hỗ trợ onSubmit thành hàm xử lý gửi. Chúng ta có thể gọi reset để đặt lại các giá trị biểu mẫu.

Ví dụ, nếu chúng ta có:

<form onSubmit={this.handleSubmit.bind(this)}>
  {/* ... */}
</form>

Sau đó, phương thức handleSubmit của chúng ta có thể được viết là:

handleSubmit(e){
  e.preventDefault();
  e.target.reset();
}

 Chúng ta gọi reset để đặt lại tất cả các trường trong form.

Điều này hoạt động cho các trường uncontrolled.

Nếu chúng ta dùng controlled field, thì phải đặt lại trạng thái về giá trị ban đầu.

Ví dụ, chúng ta có thể viết:

import React, { Component } from 'react'

class NameForm extends Component {
  initialState = { name: '' }

  state = this.initialState

  handleFormReset = () => {
    this.setState(() => this.initialState)
  }

  onChange = (e) => {
    this.setState({ name: e.target.value });
  }

  render() {
    return (
      <form onReset={this.handleFormReset}>
        <div>
          <label htmlFor="name">name</label>
          <input
            type="text"
            placeholder="name"
            name="name"
            value={this.state.name}
            onChange={this.onChange}
          />
        </div>
        <div>
          <input
            type="submit"
            value="Submit"
          />
          <input
            type="reset"
            value="Reset"
          />
        </div>
      </form>
    )
  }
}

Chúng ta có thể đặt phần hỗ trợ onReset của form thành phương thức handleFormReset để chúng ta đặt các giá trị của form trở lại giá trị ban đầu bằng cách đặt trạng thái thành InitialState. 

Vì chúng ta có một phần tử đầu vào với type là reset, khi được nhấp vào, hàm mà chúng ta đã chuyển vào prop onReset sẽ chạy.

Tạo một hàm tùy chỉnh trong React Component

Chúng ta có thể tạo một hàm tùy chỉnh trong một React Component.

Ví dụ, chúng ta có thể viết:

class App extends React.Component {

  log(message) {
    console.log(message);
  }

  handleClick(e) {
    this.log("button clicked");
  }

  componentDidMount() {
    this.log("component mounted");
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>click me</button>;
    }
}

Chúng ta có phương thức log chạy console.log.

Chúng ta có thể gọi nó từ phương thức khác với this.log.

Cách tìm nạp dữ liệu khi thuộc tính của React Component thay đổi

Để tìm nạp dữ liệu khi một React Component thay đổi, chúng ta có thể thêm phương thức componentDidUpdate vào class của chúng ta.

Nó nhận một tham số cho giá trị prop trước đó.

Chúng ta có thể sử dụng giá trị đó để so sánh với giá trị prop hiện tại để xác định xem chúng ta có muốn tìm nạp dữ liệu hay không.

Nếu chúng khác nhau, thì chúng ta thực hiện tìm nạp.

Ví dụ, chúng ta có thể viết:

class App extends Component {
  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.params.id !== this.props.params.id) {
      this.fetchData();
    }
  }

  fetchData() {
    this.props.fetchData(this.props.params.id);
  }
}

Chúng ta có phương thức componentDidUpdate có tham số prevProps.

Chúng ta so sánh id từ prevProps với id trong prop hiện tại để xác định xem chúng ta có muốn gọi fetchData hay không.

Kết luận

Chúng ta có thể đặt các style bằng JavaScript đơn giản.

Một phương thức React có thể được tạo bằng các portal.

Có nhiều cách khác nhau để đặt lại form.

Chúng ta có thể so sánh giá trị của các prop cũ và mới với componentDidUpdate. Có nhiều cách khác nhau để đặt lại biểu mẫu.

 

Nguồn: https://thewebdev.info/category/javascript/react/react-tips.