Refs في ReactJS

refلإرجاع مرجع إلى العنصر المطلوب.المراجععادةً يجب تجنب استخدامها، ولكن، قد تكون مفيدة عندما نحتاج إلى قياس DOM أو إضافة طرق إلى العنصر.

استخدام المراجع

يظهر المثال أدناه كيفية استخدام المراجع لتحديد حقل الإدخال.ClearInputاستخدام الدوالref = "myInput"البحث عن العنصر، إعادة تعيين الحالة، وإضافة التركيز إليه بعد النقر على الزر.

App.jsx

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;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App/>, document.getElementById('app'));

بمجرد ضغط الزر، سيتم مسح الإدخال والتركيز.