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õ.
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>
);
}
}
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>
<input value = {this.state.data} onChange = {this.updateState}
ref = "myInput"></input>
<button onClick = {this.clearInput}>CLEAR</button>
<h4>{this.state.data}</h4>
</div>
);
}
}
export default App;
Một khi button được nhấn, nội dung input sẽ bị xóa và thẻ input được focus.
