Rate this post

ReactJS component là một API cấp cao nhất. Nó làm cho code hoàn toàn riêng lẻ và có thể sử dụng lại trong ứng dụng. Nó bao gồm các phương pháp khác nhau để:

  • Creating elements
  • Transforming elements
  • Fragments

Các bài viết liên quan:

setState()

Phương thức này được sử dụng để cập nhật state của thành phần. Phương pháp này không phải lúc nào cũng thay thế state ngay lập tức. Thay vào đó, nó chỉ thêm các thay đổi về state ban đầu. Đây là một phương pháp chính được sử dụng để cập nhật giao diện người dùng (UI) để đáp ứng với trình xử lý events và phản hồi của máy chủ.

this .stateState (object newState [, function callback]);  (reset lại trang thì mới thay đổi)

import React, { Component } from 'react';  
import PropTypes from 'prop-types';  
class App extends React.Component {  
   constructor() {  
      super();        
      this.state = {  
          msg: "Welcome to React"  
      };      
      this.updateSetState = this.updateSetState.bind(this);  
   }  
   updateSetState() {  
       this.setState({  
          msg:"Its best ReactJS tutorial"  
       });  
   }  
   render() {  
      return (  
         <div>  
             <h1>{this.state.msg}</h1>  
             <button onClick = {this.updateSetState}>SET STATE</button>  
         </div>   );    }  }  
export default App;  

forceUpdate()

Component.forceUpdate(callback)
import React, { Component } from 'react';  
class App extends React.Component {  
   constructor() {  
      super();            
      this.forceUpdateState = this.forceUpdateState.bind(this);  
   }  
   forceUpdateState() {  
      this.forceUpdate();  
   };  
   render() {  
      return (  
         <div>  
             <h1>Example to generate random number</h1>  
             <h3>Random number: {Math.random()}</h3>  
             <button onClick = {this.forceUpdateState}>ForceUpdate</button>  
         </div>  
      );  
   }  
}  
export default App;  

findDOMNode ()

Đối với thao tác DOM, bạn cần sử dụng phương thức ReactDOM.findDOMNode (). Phương pháp này cho phép chúng tôi tìm hoặc truy cập vào nút DOM bên dưới.

import React, { Component } from 'react';  
import ReactDOM from 'react-dom';  
class App extends React.Component {  
   constructor() {  
      super();  
      this.findDomNodeHandler1 = this.findDomNodeHandler1.bind(this);  
      this.findDomNodeHandler2 = this.findDomNodeHandler2.bind(this);  
   };  
   findDomNodeHandler1() {  
       var myDiv = document.getElementById('myDivOne');  
       ReactDOM.findDOMNode(myDivOne).style.color = 'red';  
   }  
   findDomNodeHandler2() {  
       var myDiv = document.getElementById('myDivTwo');  
       ReactDOM.findDOMNode(myDivTwo).style.color = 'blue';  
   }  
   render() {  
      return (  
         <div>  
             <h1>ReactJS Find DOM Node Example</h1>  
             <button onClick = {this.findDomNodeHandler1}>FIND_DOM_NODE1</button>  
             <button onClick = {this.findDomNodeHandler2}>FIND_DOM_NODE2</button>  
             <h3 id = "myDivOne">JTP-NODE1</h3>  
             <h3 id = "myDivTwo">JTP-NODE2</h3>  
         </div>  
      );  
   }  
}  
export default App;  

Leave a Reply

Call now
%d bloggers like this: