FormTokenField

キーボードアクセシビリティ

• left arrow – 入力フィールドが空の場合、挿入ポイントを前のトークンの前に移動します。
• right arrow – 入力フィールドが空の場合、挿入ポイントを次のトークンの後に移動します。
• up arrow – 前の提案を選択します。
• down arrow – 次の提案を選択します。
• tab / enter – 提案が選択された場合、提案を新しいトークンとして挿入します。そうでない場合、入力された値を新しいトークンとして挿入します。
• comma – 入力された値を新しいトークンとして挿入します。
  

プロパティ

• value – フィールドにトークンとして表示するための文字列またはオブジェクトの配列。配列にオブジェクトが含まれている場合、それらは必ずvalueのプロパティを持っている必要があります。以下は、値として渡すことができるオブジェクトの例です：

{
   value: '(string) The value of the token.',
   status: "(string) One of 'error', 'validating', or 'success'. Applies styles to token."
   title: '(string) If not falsey, will add a title to the token.',
   onMouserEnter: '(function) Function to call when onMouseEnter event triggered on token.'
   onMouseLeave: '(function) Function to call when onMouseLeave is triggered on token.'
}

• displayTransform – トークンを表示用に変換するために呼び出す関数。（エディタ内では、タグに埋め込まれたHTMLエンティティをデコードするために必要です。そうでないと、&のようなエンティティが&のように二重エンコードされます。REST APIによって一度、Reactによって一度。）
• saveTransform – 保存用にトークンを変換するために呼び出す関数。デフォルトはトークン値をトリムすることです。この関数は、現在の値に対して提案を一致させる際にも適用され、先頭または末尾のスペースが正しく一致するようにします。（エディタ内では、wp-adminが行うように、タグ名から先頭および末尾のスペースを削除するために必要です。そうでないと、REST APIはそれらを保存しません。）
• onChange – トークンが変更されたときに呼び出す関数。新しいトークンの配列がコールバックに渡されます。
• onInputChange – ユーザーが入力フィールドに入力したときに呼び出す関数。オートコンプリートリクエストをトリガーするために使用できます。
• onFocus – TokenFieldがフォーカスされたときに呼び出す関数。イベントがコールバックに渡されます。分析に役立ちます。
• suggestions – ユーザーに提案されたトークンとして提示するための文字列の配列。
• maxSuggestions – 一度に表示する最大提案数。
• tokenizeOnSpace – trueの場合、TokenFieldがフォーカスされ、spaceが押されたときにトークンを追加します。
• isBorderless – trueの場合、トークンを背景なしでレンダリングします。
• maxLength – 渡された場合、TokenFieldはトークンの数がmaxLength以上になると新しいトークンを追加する能力を無効にします。
• disabled – trueの場合、トークンは追加または削除できません。
• placeholder – 渡された場合、TokenField入力は値トークンが存在しない場合にプレースホルダ文字列を表示します。
• messages – スクリーンリーダーによって異なる状況で提示されるメッセージをカスタマイズできます：
  • added – ユーザーが新しいトークンを追加しました。
  • removed – ユーザーが既存のトークンを削除しました。
  • remove – ユーザーがトークンを削除するボタンにフォーカスしました。
  • experimentalInvalid – ユーザーが検証を通過しなかったトークンを追加しようとしました。
• experimentalRenderItem – 提案リスト内の各オプションに対して呼び出されるカスタムレンダラー。レンダープロップは、itemキーの下に単一のオプションのデータを含むオブジェクトを引数として受け取ります（optionsプロップに渡されたデータの配列から直接）。
• experimentalExpandOnFocus – trueの場合、入力フィールドがフォーカスされているときに提案リストは常に展開されます。
• experimentalShowHowTo – falseの場合、選択の使い方に関するテキスト（例：カンマまたはEnterキーで区切る）は非表示になります。
• experimentalValidateInput – 渡された場合、すべての入力された値はトークンとして追加される前に検証されます。
• experimentalAutoSelectFirstMatch – trueの場合、ユーザーがEnterキーを押したときに最初の一致する提案を選択します（またはtokenizeOnSpaceがtrueの場合はスペース）。
• next40pxDefaultSize – 将来のバージョンでデフォルトサイズになる大きなデフォルト高さを選択し始めます。
• nextHasNoMarginBottom – 将来のバージョンでデフォルトになる新しいマージンなしスタイルを選択し始めます。現在、WordPress 7.0に予定されています。（これが発生した後、このプロップは安全に削除できます。）
• tokenizeOnBlur – trueの場合、フィールドがフォーカスを失ったときに不完全なトークン値を新しいトークンとして追加します。
  

使用法

import { useState } from 'react';
import { FormTokenField } from '@wordpress/components';
const continents = [
   'Africa',
   'America',
   'Antarctica',
   'Asia',
   'Europe',
   'Oceania',
];
const MyFormTokenField = () => {
   const [ selectedContinents, setSelectedContinents ] = useState( [] );
   return (
   <FormTokenField
   value={ selectedContinents }
   suggestions={ continents }
   onChange={ ( tokens ) => setSelectedContinents( tokens ) }
   __nextHasNoMarginBottom
   />
   );
};