Component Reference - QueryControls - 《WordPress開発者リソース》日本語

開発ガイドライン

開発ガイドライン

使用法

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 コンポーネントは、これまでの単一カテゴリ選択を置き換えるために、複数カテゴリ選択をサポートするようになりました。これを有効にするには、categoriesList の代わりに categorySuggestions を使用し、selectedCategoryId の代わりに selectedCategories 配列を使用してコンポーネントを使用します。

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

カテゴリの配列です。onCategoryChange プロパティと一緒に渡されると、コンポーネントは一度に1つのカテゴリを選択できるUIをレンダリングします。

必須: いいえ
プラットフォーム: Web

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

カテゴリ名をキーとするカテゴリのオブジェクトです。onCategoryChange プロパティと一緒に渡されると、コンポーネントは複数選択を可能にするUIをレンダリングします。

必須: いいえ
プラットフォーム: 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’

投稿を並べ替えるためのメタキーです。

必須: いいえ
プラットフォーム: Web

selectedAuthorId: number

選択された著者のIDです。

必須: いいえ
プラットフォーム: Web

selectedCategories: Category[]

categorySuggestions プロパティのために選択されたカテゴリです。

必須: いいえ
プラットフォーム: Web

selectedCategoryId: number

categoriesList プロパティのために選択されたカテゴリです。

必須: いいえ
プラットフォーム: Web

__next40pxDefaultSize: boolean

将来のバージョンでデフォルトサイズになる大きなデフォルト高さを選択し始めます。

必須: いいえ
デフォルト: false

QueryControls