查询控制

开发指南

用法

import { useState } from 'react';
import { QueryControls } from '@wordpress/components';

const QUERY_DEFAULTS = {
    category: 1,
    categories: [
        {
            id: 1,
            name: 'Category 1',
            parent: 0,
        },
        {
            id: 2,
            name: 'Category 1b',
            parent: 1,
        },
        {
            id: 3,
            name: 'Category 2',
            parent: 0,
        },
    ],
    maxItems: 20,
    minItems: 1,
    numberOfItems: 10,
    order: 'asc',
    orderBy: 'title',
};

const MyQueryControls = () => {
    const [ query, setQuery ] = useState( QUERY_DEFAULTS );
    const { category, categories, maxItems, minItems, numberOfItems, order, orderBy } = query;

    const updateQuery = ( newQuery ) => {
        setQuery( { ...query, ...newQuery } );
    };

    return (
        <QueryControls
            { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
            onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
            onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
            categoriesList={ categories }
            selectedCategoryId={ category }
            onCategoryChange={ ( newCategory ) => updateQuery( { category: newCategory } ) }
            onNumberOfItemsChange={ ( newNumberOfItems ) =>
                updateQuery( { numberOfItems: newNumberOfItems } )
            }
        />
    );
};

多分类选择器

QueryControls 组件现在支持多选分类，以替代目前可用的单选分类功能。要启用此功能，请使用带有新属性的组件：使用 categorySuggestions 代替 categoriesList，并使用 selectedCategories 数组代替 selectedCategoryId，如下所示：

const QUERY_DEFAULTS = {
    orderBy: 'title',
    order: 'asc',
    selectedCategories: [
        {
            id: 1,
            value: 'Category 1',
            parent: 0,
        },
        {
            id: 2,
            value: 'Category 1b',
            parent: 1,
        },
    ],
    categories: {
        'Category 1': {
            id: 1,
            name: 'Category 1',
            parent: 0,
        },
        'Category 1b': {
            id: 2,
            name: 'Category 1b',
            parent: 1,
        },
        'Category 2': {
            id: 3,
            name: 'Category 2',
            parent: 0,
        },
    },
    numberOfItems: 10,
};

const MyQueryControls = () => {
    const [ query, setQuery ] = useState( QUERY_DEFAULTS );
    const { orderBy, order, selectedCategories, categories, numberOfItems } = query;

    const updateQuery = ( newQuery ) => {
        setQuery( { ...query, ...newQuery } );
    };

    return (
        <QueryControls
            { ...{ orderBy, order, numberOfItems } }
            onOrderByChange={ ( newOrderBy ) => updateQuery( { orderBy: newOrderBy } ) }
            onOrderChange={ ( newOrder ) => updateQuery( { order: newOrder } ) }
            categorySuggestions={ categories }
            selectedCategories={ selectedCategories }
            onCategoryChange={ ( category ) => updateQuery( { selectedCategories: category } ) }
            onNumberOfItemsChange={ ( newNumberOfItems ) =>
                updateQuery( { numberOfItems: newNumberOfItems } )
            }
        />
    );
};

分类列表的格式也需要更新，以匹配类别建议所需的类型。

属性

authorList: Author[]

可供选择的作者数组。

• 是否必需：否
• 平台：Web

categoriesList: Category[]

分类数组。当与 onCategoryChange 属性一起传递时，它会导致组件渲染允许一次选择一个分类的用户界面。

• 是否必需：否
• 平台：Web

categorySuggestions: Record< Category[ ‘name’ ], Category >

一个以分类名称为键的分类对象。当与 onCategoryChange 属性一起传递时，它会导致组件渲染启用多选的用户界面。

• 是否必需：否
• 平台：Web

maxItems: number

最大项目数量。

• 是否必需：否
• 默认值：100
• 平台：Web

minItems: number

最小项目数量。

• 是否必需：否
• 默认值：1
• 平台：Web

numberOfItems: number

通过查询检索的选定项目数量。

• 是否必需：否
• 平台：Web

onAuthorChange: ( newAuthor: string ) => void

接收新作者值的函数。如果未指定，则不渲染作者控件。

• 是否必需：否
• 平台：Web

onCategoryChange: ( newCategory: string ) => void | FormTokenFieldProps[ ‘onChange’ ]

接收新分类值的函数。如果未指定，则不渲染分类控件。
函数的签名取决于是否启用了多选分类功能。

• 是否必需：否
• 平台：Web

onNumberOfItemsChange: ( newNumber?: number ) => void

接收新项目数量的函数。如果未指定，则不渲染项目数量范围控件。

• 是否必需：否
• 平台：Web

onOrderChange: ( newOrder: ‘asc’ | ‘desc’ ) => void

接收新排序值的函数。如果未指定此属性或 onOrderByChange 属性，则不渲染排序控件。

• 是否必需：否
• 平台：Web

onOrderByChange: ( newOrderBy: ‘date’ | ‘title’ ) => void

接收新 orderby 值的函数。如果未指定此属性或 onOrderChange 属性，则不渲染排序控件。

• 是否必需：否
• 平台：Web

order: ‘asc’ | ‘desc’

检索文章的顺序。

• 是否必需：否
• 平台：Web

orderBy: ‘date’ | ‘title’ | ‘menu_order’

用于对文章进行排序的元数据键。

• 是否必需：否
• 平台：Web

orderByOptions: OrderByOption[]

用于对文章进行排序的元数据键。

• 是否必需：否
• 平台：Web

selectedAuthorId: number

选定的作者 ID。

• 是否必需：否
• 平台：Web

selectedCategories: Category[]

categorySuggestions 属性所选的分类。

• 是否必需：否
• 平台：Web

selectedCategoryId: number

categoriesList 属性所选的分类。

• 是否必需：否
• 平台：Web