ReactJS Refs

ref해당 요소로의 참조를 반환합니다.Refs대부분의 경우 이들을 피해야 하지만, DOM 측정이나 컴포넌트에 메서드를 추가할 필요가 있을 때 유용할 수 있습니다.

Refs 사용

다음 예제는 입력 필드를 지우기 위해 참조를 사용하는 방법을 보여줍니다.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'));

버튼을 누르면 입력이 지우리되고 포커스가 되어.