WijmoJS的菜單和類似列表的控件（ListBox、ComboBox、MultiSelect）允許用戶在formatItem事件中使用JS代碼和DOM API為每個項目生成元素樹，從而自定制項目的內容。在和React框架深度結合后，在JSX標記中使用React組件及其屬性綁定將會更加方便，即以聲明方式定義項目內容。

在WijmoJS的新版本中，GrapeCity為WijmoJS React Interop添加了兩個特殊的功能項：

• 對于 Menu，添加了MenuItem和MenuSeparator子組件，它允許您在JSX中以聲明方式定義菜單項和分隔符。

• 對于所有類似列表的控件（ListBox、ComboBox、MultiSelect、Menu），添加了特殊的wjItemTemplate渲染道具，它允許您指定繪制項目內容的渲染函數。

點擊下載WijmoJS正式版

React 菜單項（List Items)

純javascript菜單控件假定其菜單項是在綁定到控件項源屬性的數組中定義的，即項目在React組件的模型部分中定義。但這并不是最佳選項，實際上菜單項與組件的UI關系更為緊密，因此，使用React UI方法（即JSX標記）定義它們會更方便。

使用WijmoJS，您可以通過\@ grapecity/wijmo.react.input模塊中的新MenuItem組件快速實現菜單項目定義：在渲染函數的JSX標記中使用嵌套到其Menu部分的MenuItem組件，而不是在數組中定義項目，其中每個MenuItem定義一個單獨的菜單項，其內容具有任意復雜性。

此外，使用MenuSeparator組件還可用于在菜單項之間插入分隔符。例如，此示例中的以下jsx代碼定義了具有豐富內容的菜單項目，并在退出項之前使用分隔符：

<wjInput.Menu
    header="File"
    itemClicked={this.menuItemClicked}>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-asterisk"></span>
        <b>New</b>
        <br />
        <small><i>create a new file</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-folder-open"></span>
        <b>Open</b>
        <br />
        <small><i>open an existing file or folder</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-floppy-disk"></span>
        <b>Save</b>
        <br />
        <small><i>save the current file</i></small>
    </wjInput.MenuItem>
    <wjInput.MenuSeparator></wjInput.MenuSeparator>
    <wjInput.MenuItem>
        <span className="glyphicon glyphicon-remove"></span>
        <b>Exit</b>
        <br />
        <small><i>exit the application</i></small>
    </wjInput.MenuItem>
</wjInput.Menu>

您還可以從定義其數據的數據源中，動態生成多個MenuItem。

例如下方代碼實現了：調色板數組映射到表示其數據的MenuItem數組中：

<wjInput.Menu
    header="Palette"
    maxDropDownHeight={300}
    value={this.state.thePalette}>
    {this.palettes.map((value) => {
        return <wjInput.MenuItem value={value.name}>
            {value.name}
            <span style={{float:'right'}}>
            {value.colors.map((color) => {
                return <div style={{
                    backgroundColor: color,
                    display:'inline',
                    padding:'2px',
                    height:'10px',
                    width:'3px'}}>
                </div>
            })}
            </span>
        </wjInput.MenuItem>
    })}
</wjInput.Menu>

請注意，此處的Menu組件未使用其itemsSource屬性綁定數據數組。相反，它直接從數據數組中生成子MenuItem組件。

命令（Commands）

您現在可以用聲明的方式，定義綁定帶參數/命令的菜單項。MenuItem組件從其接口中公開了cmd和cmdParam屬性，這些屬性可以分別綁定命令及其參數。

下面的代碼示例演示了：如何使用這些屬性來定義遞增或遞減的菜單項。其中，每個項目表示作為命令參數指定的不同增量值：

<wjInput.Menu
    header="Tax Commands"
    id="changeTax"
    command={this.state.command}>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.50}>
        Increment by 50%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.25}>
        Increment by 25%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={0.05}>
        Increment by 5%
    </wjInput.MenuItem>
    <wjInput.MenuSeparator></wjInput.MenuSeparator>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.05}>
        Decrement by 5%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.25}>
        Decrement by 25%
    </wjInput.MenuItem>
    <wjInput.MenuItem cmd={this.state.command} cmdParam={-0.50}>
        Decrement by 50%
    </wjInput.MenuItem>
</wjInput.Menu>

值選擇器（Value Picker）

隨著MenuItem組件的引入，Menu現在可以用作值選擇器。MenuItem組件的value屬性包含了與該項關聯的值。點擊下載WijmoJS正式版

WijmoJS的菜單本身就具有value屬性，其值顯示在菜單標題旁邊，其屬性可以綁定到父組件狀態，而其中的itemClicked事件可用于更新與所選菜單項關聯值的狀態。此示例演示了可用于選擇瀏覽器名稱的菜單：

render() {
    return <wjInput.Menu
            header="Run"
            value={this.state.browser}
            itemClicked={this.splitButtonItemClicked}>
        <wjInput.MenuItem value="IE">Internet Explorer</wjInput.MenuItem>
        <wjInput.MenuItem value="Chrome">Chrome</wjInput.MenuItem>
        <wjInput.MenuItem value="FF">FireFox</wjInput.MenuItem>
        <wjInput.MenuItem value="Safari">Safari</wjInput.MenuItem>
        <wjInput.MenuItem value="Opera">Opera</wjInput.MenuItem>
    </wjInput.Menu>
}
splitButtonItemClicked = (menu) => {
    this.setState({
        browser: menu.selectedItem.value
    });
};

項目模板（Item Templates）

您可以使用formatItem事件為純JS的列表類控件創建自定義項目內容，如ListBox、ComboBox、MultiSelect和Menu。相應的React組件允許您使用JSX標記以聲明方式定義項目內容。

此外，對于每個提到的組件，WijmoJS都會公開一個名為“wjItemTemplate”的渲染道具，它允許您指定繪制項目內容的渲染函數。例如，此示例演示了：通過標記繪制了一個字形，其名稱取自源數組：

<wjInput.ListBox
    displayMemberPath="country"
    itemsSource={this.state.glyphs}
    selectedIndexChanged={this.onSelectedIndexChanged}
    initialized={this.onInitialized}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div>
            <div className="wj-glyph">
                <span className={`wj-glyph-${context.item}`}></span>
            </div>
            {context.item}
        </div>
    )}>
</wjInput.ListBox>

注意，wjItemTemplate渲染函數提供了一個上下文參數，該參數用以帶來有關當前繪圖項的信息對象，它公開了以下屬性：

• item - 正在呈現其內容的數據項

• itemIndex - 要呈現的項的索引

• control - 由React組件表示的底層純JS控件

MultiSelect 組件

MultiSelect組件與其他類似列表的控件相比具備一個顯著特征：其每個項目都包含了一個復選框，用于更改項目的已檢查狀態。

在使用項目模板進行項目自定義時，此功能也可以保留。與往常一樣，項目模板中type =“checkbox”的第一個輸入元素將用作檢查狀態開關。

此示例中的代碼定義了包含此類復選框的項目模板：

<wjInput.MultiSelect
    displayMemberPath="name"
    headerPath="name"
    placeholder="Countries"
    itemsSource={this.state.data}
    showSelectAllCheckbox={this.state.showSelectAllCheckbox}
    checkedItemsChanged={this._onCheckedItemsChanged.bind(this)}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div className="item">
            <label><input type="checkbox"/>{context.item.name}</label>
            <br/>
            <b>{context.item.city}</b> ({context.item.state})<br/>
            {context.item.address}<br/>
            Phone: <b>{context.item.phone}</b><br/>
            Fax: <b>{context.item.fax}</b><br/>
            Website: <a href="{context.item.site}" target="_blank">{context.item.site}</a><br/>
        </div>
    )}>
</wjInput.MultiSelect>

菜單（Menu）

在上面的介紹中，我們已經向您演示了如何從一組數據項，動態創建MenuItem組件。下面將介紹的wjitemTemplate渲染屬性是實現此類功能的另一種方法。

使用此方法，Menu組件應該綁定到一個項目數組中，而wjItemTemplate render prop定義一個用于呈現每個項目的模板。

例如，此示例中的代碼片段顯示綁定到音樂家數組的菜單的自定義項：

header="Artists"
    itemClicked={this.menuItemClicked}
    itemsSource={this.musicians}
    maxDropDownHeight={300}
    wjItemTemplate={(context: wjInput.ItemTemplateContext)=>(
        <div style={{minWidth: '160px'}}>
            {context.itemIndex + 1}. <b>{context.item.name}</b>
            {context.item.photo ?
            <div>
                <img src={context.item.photo} height="50" />
            </div>
            : null}
        </div>
    )}>
</wjInput.Menu>

結論

WijmoJS全新的MenuItem組件和wjItemTemplate渲染道具，全面提升了WijmoJS列表類組件的自定義擴展能力和便捷性。

毫不夸張的說，使用WijmoJS前端開發工具包，您現在可以通過傳統的JSX標記，綁定帶有其他應用程序組件的豐富項目，并定義其內容。

想要獲得 WijimoJS 更多資源或正版授權的伙伴，

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊