React Tips (Part 1) - Disable Buttons, FormData, Types for Function

React là một thư viện phổ biến để tạo ứng dụng web và ứng dụng di động. Trong bài viết này, chúng ta sẽ xem xét một số mẹo để viết ứng dụng React tốt hơn.

Gửi Multipart Form Data với Axios trong React Component

Chúng ta có thể gửi dữ liệu biểu mẫu bằng hàm tạo FormData.

Chúng ta có thể chuyển thẳng điều đó vào phương pháp Axios post.

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

import React from 'react'
import axios, { post } from 'axios';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state ={
      file:null
    }
    this.onFormSubmit = this.onFormSubmit.bind(this)
    this.onChange = this.onChange.bind(this)
    this.fileUpload = this.fileUpload.bind(this)
  }

  onFormSubmit(e){
    e.preventDefault()
    const url = 'http://example.com/upload';
    const formData = new FormData();
    formData.append('file', this.state.file);
    const config = {
      headers: {
        'content-type': 'multipart/form-data'
      }
    }
    post(url, formData, config);
      .then((response) => {
        console.log(response.data);
      })
  }

  onChange(e) {
    this.setState({ file: e.target.files[0 ]})
  }

  render() {
    return (
      <form onSubmit={this.onFormSubmit}>
        <h1>File Upload</h1>
        <input type="file" onChange={this.onChange} />
        <button type="submit">Upload</button>
      </form>
   )
  }
}

Chúng tôi có đầu vào tệp, nơi chúng tôi đặt đầu vào tệp thành tệp được gửi trong phương thức onChange.

Chúng tôi lưu đối tượng tệp đã chọn dưới dạng giá trị của trạng thái tệp.

Sau đó, khi chúng tôi nhấp vào nút Tải lên, onFormSubmit sẽ chạy. Trong phương thức, chúng tôi đã tạo một cá thể FomrData. Sau đó, chúng tôi nối tệp của mình vào cá thể FormData. Chúng tôi cũng đặt tiêu đề để biết rằng chúng tôi đang gửi dữ liệu biểu mẫu. 

Khi đã làm điều đó, chúng tôi tiến hành tải tệp lên.

Disable Button với React

Chúng ta có thể vô hiệu hóa một nút với React bằng cách thiết lập phần hỗ trợ bị tắt của nút.

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

<button disabled={!this.state.value} />

Chúng ta có thể sử dụng nó trong một thành phần bằng cách viết:

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

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.value}
          onChange={this.onChange}
          placeholder='item name'
        />
        <button
          disabled={!this.state.value}
          onClick={this.add}
        >
          Add
        </button>
      </div>
    );
  }

Chúng tôi chuyển vào trạng thái giá trị để cho phép nhập dữ liệu mà chúng tôi muốn vào trường đầu vào.

Sau đó, chúng tôi kiểm tra điều đó trong phần hỗ trợ bị vô hiệu hóa của nút.

Bằng cách này, nút sẽ bị vô hiệu hóa nếu chúng ta không nhập gì vào trường biểu mẫu.

Không thể đọc 'bản đồ' Thuộc tính của Undefined

Chúng tôi có thể nhận được điều này nếu thử call bản đồ trên thứ gì đó không có phương thức bản đồ. Điều này có thể xảy ra với thứ mà chúng tôi mong đợi là một mảng, nhưng không phải vậy. 

Do đó, chúng ta nên kiểm tra xem giá trị chúng ta đang gọi bản đồ có phải là một mảng hay không trước khi làm bất cứ điều gì. 

Ví dụ, chúng ta có thể làm điều đó bằng cách viết:

if (Array.isArray(this.props.data)) {
  const commentNodes = this.props.data.map((comment) => {
    return (
      <div>
        <h1>{comment.title}</h1>
      </div>
    );
  });
}

Chúng tôi đã gọi Array.isArray để kiểm tra xem this.props.data có phải là một mảng hay không.

Nếu đúng như vậy, thì chúng ta gọi bản đồ để ánh xạ chỗ dựa dữ liệu tới các phần tử h1.

Cách thêm các thuộc tính HTML tùy chỉnh trong JSX

Với React 16, chúng ta có thể thêm các thuộc tính tùy chỉnh nguyên bản.

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

render() {
  return (
    <div data-foo="bar" />
  );
}

Chúng ta có thể thêm nó thẳng vào các phần tử HTML của mình mà không cần làm gì đặc biệt.

Sử dụng Children với React Stateless Functional Component trong TypeScript 

Chúng ta có thể chuyển giao diện hoặc nhập bí danh vào đối số kiểu chung của React.FunctionComponent để đặt kiểu cho các đạo cụ của bạn.

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

const Foo: React.FunctionComponent<FooProps> = props => (
  <div>
    <p>{props.bar}</p>
    <p>{props.children}</p>
  </div>
);

FooProps có các mục nhập thanh và con, vì vậy chúng ta có thể tham chiếu cả hai trong thành phần của mình.

React.FC là cách viết tắt của React.FunctionComponent.

Trước React 16.8, chúng tôi sử dụng kiểu React.StatelessComponent để thay thế.

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

const Foo: React.StatelessComponent<{}> = props => (
  <div>{props.children}</div>
);

 hoặc là:

const Foo : React.StatelessComponent<FooProps> = props => (
  <div>
    <p>{props.propInMyProps}</p>
    <p>{props.children}</p>
  </div>
);

React.SFC là cách viết tắt của React.StatelessComponent.

Kết luận:

Chúng ta có thể thêm các types vào các thành phần không trạng thái bằng TypeScript. Việc gửi dữ liệu biểu mẫu nhiều phần có thể được thực hiện với hàm tạo FormData.

Ngoài ra, chúng ta nên đảm bảo rằng chúng ta có một mảng trước khi calling map trên đó.

Chúng tôi có thể vô hiệu hóa các nút có điều kiện với React.

Nguồn bài viết: thewebdev.info

Tham khảo khóa học Web Frontend + React

Khóa học Web Frontend nâng cao với React (ReactJs)