recast.ly 에서 ref 활용

리액트에서는 input 의 값(value) 을 가져오고 싶어도, 직접적으로 오리지널 DOM 을 건드리면 안 된다.

document.getElementById('myInput').value (x)

그래서 ref 를 이용해야 한다.

 

 

import React from 'react';
// import { searchYouTube } from '../searchYouTube';
 
class Search extends React.Component {
  constructor(props) {
    super(props);
 
    this.searchInput = React.createRef();
  }
 
  render() {
    let timer = null;
    let getYouTube = this.props.getYouTube;
 
    // console.log('input: ', this.searchInput);
 
    return (
      <div className="search-bar form-inline">
        <form
          className="search-form"
          onSubmit={e => {
            e.preventDefault();
            if (timer) {
              clearTimeout(timer);
            }
            let q = this.searchInput.current.value;
            // console.log('s: ', this.searchInput.current.value);
            getYouTube(q);
          }}
        >
          <input
            className="form-control"
            name="search"
            ref={this.searchInput}
            type="text"
            onChange={e => {
              // let q = e.target.value;
              // this.setState({ searchQuery: q });
              // setState 사용시 리렌더링 되면서 클리어타임아웃이 제대로 적용이 안 되는 문제?
 
              let query;
              e.target.value ? (query = e.target.value) : '';
              console.log(query);
 
              if (timer) {
                clearTimeout(timer);
              }
 
              timer = setTimeout(() => {
                getYouTube(query); // query 변수를 만들지 않고 e.target.value 를 하면 에러가 난다.
              }, 1000);
            }}
          />
          <button className="btn hidden-sm-down" type="submit">
            <span className="glyphicon glyphicon-search"></span>
          </button>
        </form>
      </div>
    );
  }
}
 
export default Search;