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

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>

State Array: {this.state.data}

</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>

Random number: {Math.random()}

</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: