Hướng dẫn ReactJS ReactJS tutorial (p6) Bài 6: ReactJS Tìm hiểu về Component API

Trong bài này, chúng ta sẽ tìm hiểu về 3 methods tiêu biểu trong React: setState(), forceUpdate và ReactDOM.findDOMNode(). Set State setSate() methods được sử dụng để update state trong component (xem bài 4 nếu bạn không biết state là gì), method này sẽ không tạo state mới mà chỉ update 1 state cũ có sẵn. Các bạn xem vd sau:

Bài 6: ReactJS - Tìm hiểu về

Component API

Trong bài này, chúng ta sẽ tìm hiểu về 3 methods tiêu biểu trong

React: setState(), forceUpdate và ReactDOM.findDOMNode().

Set State

setSate() methods được sử dụng để update state trong component (xem bài 4 nếu bạn không biết state là gì), method này sẽ không tạo state mới mà chỉ update 1 state cũ có sẵn Các bạn xem vd sau:

import React from 'react';

class App extends React.Component

constructor()

super();

this.state = {

data: []

}

this.setStateHandler = this.setStateHandler.bind(this);

};

setStateHandler()

var item = "setState "

var myArray = this.state.data.slice();

myArray.push(item);

this.setState({data: myArray})

};

render()

return

<div>

<button onClick = {this.setStateHandler}>SET STATE</button>

<h4>State Array: {this.state.data}</h4>

</div>

);

}

}

export default App;

Trong ES6 khi bạn viết 1 function trong class, thì nó vẫn chưa được đinh nghĩa trong

class, bạn phải định nghĩa nó trong constructor: this.setStateHandler =

this.setStateHandler.bind(this);

Ở ví dụ trên chúng ta bắt đầu với 1 chuỗi rỗng, mỗi lần chúng ta click vào button, state

sẽ được update, nếu bạn click 5 lần sẽ được kết quả như hình:

Force Update

Thông thường React sẽ render lại component khi chúng ta update state của nó, nhưng đôi lúc chúng ta muốn tự tay update nó mà không thông qua state, khi đó ta cần

đến Force Update:

import React from 'react';

class App extends React.Component

constructor()

super();

this.forceUpdateHandler = this.forceUpdateHandler.bind(this);

};

forceUpdateHandler()

this.forceUpdate();

};

render()

return

<div>

<button onClick = {this.forceUpdateHandler}>FORCE UPDATE</button> <h4>Random number: {Math.random()}</h4>

</div>

);

}

}

export default App;

Chúng ta sẽ render ra 1 số bất kì mỗi khi bấm vào button.

Find Dom Node

Để xử lý các Dom trong React ta làm như nhau:

Đầu tiên ta phải import react-dom

import React from 'react';

import ReactDOM from 'react-dom';

class App extends React.Component

constructor()

super();

this.findDomNodeHandler = this.findDomNodeHandler.bind(this); };

findDomNodeHandler()

var myDiv = document.getElementById('myDiv');

ReactDOM.findDOMNode(myDiv).style.color = 'green';

}

render()

return

<div>

<button onClick = {this.findDomNodeHandler}>FIND DOME NODE</button>

<div id = "myDiv">NODE</div>

</div>

);

}

}

export default App;

Kết quả khi nhấn button: