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 tôi 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 biểu mẫu dữ liệ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 (
      

        
File Upload
        
        Upload
      
   )
  }
}

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 theo phương thức onChange

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

Sau đó, khi 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 kết nối tệp của mình vào FormData cá nhân. Chúng tôi cũng đặt tiêu đề để thông báo 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

Vô hiệu hóa nút 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ợ để tắt nút

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

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

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

  render() {
    return (
      

        
        
          Add
        
      
    );
  }

Chúng tôi chuyển sang 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 bắt đầu

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

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

Cannot read '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ử gọi bản đồ trên thứ không có phương thức bản đồ. Điều này có thể xảy ra với thứ mà 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ị mà chúng ta gọi là 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 (
      

        
{comment.title}
      
    );
  });
}

We call Array. isArray to check this. đạo cụ. data has must be an an array or not

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

Cách thêm các thuộc tính tùy chỉnh HTML 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 (
    

  );
}

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

Sử dụng Trẻ em với Thành phần chức năng phi trạng thái React 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 to set type for your đạo cụ

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

const Foo: React.FunctionComponent = props => (
  

    
{props.bar}
    
{props.children}
  
);

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

Phản ứng. FC là cách viết tắt của React. Chức năngThành phần

Trước React 16. 8, chúng tôi sử dụng kiểu React. StatelessComponent to instead

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

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

or is

const Foo : React.StatelessComponent = props => (
  

    
{props.propInMyProps}
    
{props.children}
  
);

Phản ứng. SFC là cách viết tắt của React. Thành phần không trạng thái

Kết luận

Chúng ta có thể thêm các loại 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