検索内で外部コンポーネントアクションを使います
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
以下のReact例では、検索内の外部コンポーネントアクションを使用しています。この例では、setModalOperationsプロパティを使ってモーダルフッターにボタンや関連する動作を追加し、検証を行う方法を示しています。 setModalOperationsプロパティはモーダル操作の配列を持つ関数です。
!注setModalOperationsプロパティは、外部コンポーネントアクション内の外部コンポーネントにのみ利用可能な追加のプロパティです。
モーダル操作は以下のインターフェースを持ちます。
interface ModalOperationConfig {
name: string;
id: string;
label: string;
displayType?: DisplayType;
className?: string;
onValidate?: () => boolean | Promise
displayTypeの選択肢は、link、default、primary、secondaryです。
import ReactDOM from "react-dom";
import React from "react";
const OptionsContext = React.createContext
const okButtonConfig: ModalOperationConfig = { name: "ok", id: "ok", label: "Ok", displayType: "primary", onValidate: () => { console.log("validating async..."); return new Promise((resolve) => setTimeout(() => { const isValid = Math.random() > 0.5; if (!isValid) { notifier.notifyError("Invalid!"); } resolve(isValid); }, 500) ); }, onClick: () => { notifier.notifySuccess("Success!"); }, onMouseOver: () => { console.log("mouseover"); }, };
const cancelButtonConfig: ModalOperationConfig = { name: "cancel", id: "cancel", label: "Cancel", onClick: () => { notifier.notifyInfo("Canceled"); }, };
setModalOperations(okButtonConfig, cancelButtonConfig);
ReactDOM.render( <OptionsContext.Provider value={options}> <OptionsContext.Consumer> {(options) => { return ( <>