Hướng dẫn ReactJS ReactJS tutorial (p10) Bài 10: ReactJS sử dụng Refs

Bài 10: ReactJS - sử dụng Refs
Ref được sử dụng để tương tác với các thành phần mà component đó return ra. Các bạn xem
ví dụ dưới các ví dụ dưới đây để hiểu rõ.

Using Refs
Simple example: Trong ví dụ này, các bạn sẽ tạo 1 component return 1 thẻ input để nhập dữ
liệu, và 1 button để khi click vào alert dữ liệu đã nhập.

App.js
class App extends React.Component {
constructor(props){
super(props);
this.layThongtin=this.layThongtin.bind(this);
}
layThongtin(){
var text=this.refs.myInput.value;
alert(text);
}
render() {
return (
<div>
<input ref="myInput" type="text"/>
<button onClick={this.layThongtin}>click</button>
</div>
);
}
}
Index.js

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App.jsx';


ReactDOM.render(<App/>, document.getElementById('app'));

Complex example: Trong ví dụ này chúng ta sẽ sử dung refs để xóa dữ liệu trong thẻ input
bằng ClearInput function tìm kiếm 1 phần tử có ref=myInput thông ReactDom.findDomNode.
App.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
data: ''
}
this.updateState = this.updateState.bind(this);
this.clearInput = this.clearInput.bind(this);
};
updateState(e) {
this.setState({data: e.target.value});
}
clearInput() {
this.setState({data: ''});
ReactDOM.findDOMNode(this.refs.myInput).focus();
}
render() {

return (


<div>
ref = "myInput"></input>
<button onClick = {this.clearInput}>CLEAR</button>

{this.state.data}

</div>
);
}
}
export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Một khi button được nhấn, nội dung input sẽ bị xóa và thẻ input được focus.