Javascriptの初期化はので、私は現在、マテリアライズを使用してい

Question

こんにちは反応し、私のプロジェクトのためのライブラリを反応します。私は本当に、次のjavascriptで初期化する必要がある日付ピッカーを使用したい。 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イベントリスナーを持つ小さな木になります。

はがそれらをレンダリングを経由してコンポーネントからDOMを構築反応します。 DOM要素にコンポーネントターンを作成するには、DOMツリー内の特定のポイントに、このコンポーネントマウントを反応します。コンポーネントがマウントされた後は、document.getElementByIdなどの古いDOM APIからアクセスできます。

リアクタントコンポーネントは、コンポーネントがマウントされた後に実行される関数であるため、DOMツリーに存在することが保証されています。ドットを接続

は、あなたはこのように、componentDidMount内jQueryのものを使用する必要があります。

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)} /> 
    ); 
    } 
} 

しかし、より良い練習は、その参照を経由して、特定のDOM要素を参照することである（the documentationを参照）、そのコード

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は2次的であり、コンポーネントの状態と小道具によって表される基本データからのみレンダリングされます。 UIはあなたにもこのデータを更新するの世話をする必要があるが、それはこの質問の範囲外だと完全にgoogleableである理由これは、データの更新reactivelyに応答します。