آموزش ReactJS – فصل یازدهم: رفرنس ها (Refs)

استفاده از رفرنس ها در ری اکت

مثال زیر نشان می دهد که شما چگونه می توانید از ref برای بازنشانی اطلاعات درون یک زمینه فرم استفاده کنید.

متود ClearInput در هنگامی که بر روی دکمه درون صفحه کلیک می کنیم اجرا می شود، مقدار data درون استیت را خالی می کند و سپس به دنبال المانی با مقدار ref = "myInput" می گردد بر روی آن focus می کند.

کد های زیر را درون فایل 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;

فصل 11 – مثال 1 (فایل App.jsx)

کد های زیر را درون فایل index.js قرار دهید:

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

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

فصل 11 – مثال 1 (فایل index.js)

پس از اجرای مثال بالا با npm start، صفحه ای مشابه تصویر زیر مشاهده خواهید کرد، با تایپ درون زمینه ورودی و سپس کلیک بر روی دکمه clear، اطلاعات تایپ شده درون زمینه حذف خواهند شد و بر روی زمینه مورد نظر focus می شود.