자바 스크립트 초기화 :

Question

안녕하세요. 저는 현재 프로젝트에 Materialize 및 React 라이브러리를 사용하고 있습니다. 난 정말 다음 자바 스크립트로 초기화해야 그들의 날짜 선택기를 사용하고 싶습니다. html로에 의해 표현된다

$('.datepicker').pickadate({ 
    selectMonths: true, // Creates a dropdown to control month 
    selectYears: 15 // Creates a dropdown of 15 years to control year 
}); 

:

<input type="date" class="datepicker"> 

http://materializecss.com/forms.html

은 어떻게 반작용 프로젝트에이 통합에 대해 갈 것입니다. 어디서부터 시작해야할지 모르겠습니다. 감사!

Answer 1

jQuery는 DOM과 작동합니다. 그것은 하나의 요소를 찾고, 더러운 트릭을 수행하며, 따라서 간단한 input 요소는 DOM 이벤트 리스너가있는 작은 트리가됩니다.

React는 을 통해 구성 요소에서 DOM을 빌드 렌더링합니다. 구성 요소를 DOM 요소로 바꾸려면 React 은 DOM 트리 내의 특정 지점에이 구성 요소를 탑재합니다. 구성 요소가 마운트 된 후에는 document.getElementById 등과 같이 오래된 DOM API를 통해 액세스 할 수 있습니다.

React 구성 요소는 구성 요소가 마운트 된 후 실행되는 기능인 componentDidMount 속성을 가질 수 있으므로 DOM 트리에 있음을 보장합니다.

class MyComponent extends Component { 
    componentDidMount() { 
    $('.datepicker').pickadate({ 
     selectMonths: true, // Creates a dropdown to control month 
     selectYears: 15 // Creates a dropdown of 15 years to control year 
    }); 
    } 

    render() { 
    return (
     <input 
     className="datepicker" 
     onChange={event => console.log('Just changed!', event.target.value)} /> 
    ); 
    } 
} 

그러나 더 좋은 방법은, (the documentation 참조)의 심판을 통해 특정 DOM 요소를 참조 코드 있도록하는 것입니다

점을 연결,이 같은 componentDidMount 내부의 jQuery 물건을 사용할 필요가 보이는 것처럼

class MyComponent extends Component { 
    constructor() { 
    super(); 
    } 

    componentDidMount() { 
    const node = this.input; 

    $(node).pickadate({ 
     selectMonths: true, // Creates a dropdown to control month 
     selectYears: 15 // Creates a dropdown of 15 years to control year 
    }); 
    } 

    render() { 
    return (
     <input 
     className="datepicker" 
     ref={node => { 
      this.input = node; 
     }} 
     onChange={event => console.log('Just changed!', event.target.value)} /> 
    ); 
    } 
} 

React에서 DOM은 보조이며 구성 요소 상태 및 소품으로 표시되는 기본 데이터에서만 렌더링됩니다. UI가 데이터 업데이트 reactively에 응답하기 때문에이 데이터를 업데이트해야하지만이 질문의 범위를 벗어나 완벽하게 googleable입니다.