Loading...
Refs در ReactJS
در ReactJS برای ارجاع به یک عنصر از ref استفاده می شود. در اغلب موارد نباید از ref استفاده کرد اما زمانی که بخواهیم متدها را به کامپوننت اضافه کنیم، مفید است.
استفاده از Refs
مثال زیر نحوه استفاده از refs برای پاک کردن مقدار فیلد ورودی را نشان می دهد. تابع ClearInput ابتدا مقدار state را خالی می کند و سپس در بین عناصر DOM به دنبال عنصری با مقدار ref = “myInput” میگردد و در صورت پیدا شدن، بر روی آن فوکوس می کند.
محتوای فایل App.jsx:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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:
1 2 3 4 | import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.jsx'; ReactDOM.render(<App/>, document.getElementById('app')); |
زمانی که بر روی دکمه کلیک شود، ابتدا مقدار input را پاک می کند و سپس بر روی آن فوکوس می کند.
هیچ نظری ثبت نشده است