このモジュールは、Wijmoコントロールをカプセル化したReactコンポーネントを提供します。

これを使用するには、ReactライブラリとReactDOMライブラリへの参照、 および通常のWijmo CSSファイルとjsファイルをアプリケーションに含める必要があります。

および通常のWijmo CSSファイルとjsファイルをアプリケーションに含める必要があります。 適切なタグを含めます。たとえば、次のコードは、 Reactコンポーネントに InputNumber コントロールを追加します。

<label htmlFor="inputnumber">InputNumber コントロールの例：</label>
<Wj.InputNumber
  id="inputNumber"
  format="c2"
  min={ 0 } max={ 10 } step={ .5 }
  value={ this.state.value }
  valueChanged={ this.valueChanged }/>

この例は、次の重要なポイントを示しています。

1. Wijmoコントロールのタグ名は、"Wj"プリフィックスで始まり、その後にコントロール名が続きます。 "Wj"は、完全なモジュール名"wijmo.react"の省略形です。完全なモジュール名も使用できます。
2. タグ属性名は、コントロールのプロパティやイベントと同じです。
3. 引用符で囲まれた属性値は文字列として解釈され、 中かっこで囲まれた値はJavaScript式として解釈されます。
4. Reactコンポーネントには暗黙の双方向連結がありません。したがって、 値を変更するコントロールは、通常、イベントハンドラを使用して明示的に親コンポーネントの状態に変更を適用します。

この最後のポイントの具体例として、上記のマークアップを含むコンポーネントには、 通常、次のような"valueChanged"イベントハンドラが実装されます。

valueChanged: function(s, e) {
  this.setState({ value, s.value });
}

このイベントハンドラは、ReactのsetState メソッドを使用してコンポーネントの状態を更新することで、UIの更新を自動的にトリガします。 このメソッドは、"state"オブジェクトに直接書き込みを行わないことに注意してください。Reactアプリケーション内では、 これを不変オブジェクトとして扱う必要があります。

すべてのWijmo Reactコンポーネントには、"initialized"イベントがあります。これは、 コントロールがページに追加されて初期化された後に発生します。このイベントを使用して、 マークアップでプロパティを設定するほかに、 追加的な初期化を実行できます。次に例を示します。

<Wj.FlexGrid
  initialized={ function(s,e) {

// グリッドにカスタムMergeManagerを割り当てます
s.mergeManager = new CustomMergeManager(s);

  }}
/>