ReactJS - Referanslar
ref öğeye bir başvuru döndürmek için kullanılır. Refs çoğu durumda kaçınılmalıdır, ancak bunlar DOM ölçümlerine ihtiyaç duyduğumuzda veya bileşenlere yöntemler eklemek için faydalı olabilirler.
Referansları Kullanma
Aşağıdaki örnek, giriş alanını temizlemek için ref'lerin nasıl kullanılacağını gösterir. ClearInput fonksiyon ile eleman arar ref = "myInput" değer, durumu sıfırlar ve düğmeye tıklandıktan sonra odak ekler.
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'));
Düğme tıklandığında, input temizlenecek ve odaklanılacaktır.