質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Echo(フレームワーク)

Echoは、Go言語で作られたフレームワーク。非常に軽量で、小~中規模のアプリ構成を想定した仕様になっています。公式ドキュメントが用意されており、初心者でも始めやすい点が特徴です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

WordPressブロック開発にて<SelectControl>コンポーネントを複数選択にしたい

ojakomaru
ojakomaru

総合スコア10

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Echo(フレームワーク)

Echoは、Go言語で作られたフレームワーク。非常に軽量で、小~中規模のアプリ構成を想定した仕様になっています。公式ドキュメントが用意されており、初心者でも始めやすい点が特徴です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0評価

0クリップ

225閲覧

投稿2022/04/05 12:51

前提

WordPressのブロック開発を行っています
WordPressはバージョン 5.9.2
開発環境となる npm は 8.1.2
node.jsのバージョンv16.13.1
MAMPでローカル環境を構築しプラグインとしてカスタムブロックを追加して開発を行っています

実現したいこと

投稿の情報を取得して<select>コンポーネントで複数選択可能なブロックを作成する。

発生している問題

<SelectControl>コンポーネントで value プロパティを配列として渡せません
valueがうまく受け取れないので当然クリックしても反応しません(データは取れている)

投稿データを取得してセレクトタグとしてレンダリングするところまではうまくいきました。
高階コンポーネントとして withSelect を使用し投稿データを「posts」として受け取っています。
高階コンポーネントを別ファイルに記述し、<SelectControl>を含むコンポーネントでマージしています
エラーなどは出ていません

該当のソースコード

posts-select.js

javascript

import { withSelect } from '@wordpress/data'; import { SelectControl } from "@wordpress/components"; const PostsSelect = (props) => { const { posts, selectedPostId, selectPost } = props; //SelectControl の options プロパティに指定する投稿のタイトルとIDから成るオブジェクトの配列 let select_options = []; if (posts) { select_options.push({ value: 0, label: "投稿を選択", disabled: true }); posts.forEach((post) => { select_options.push({ value: post.id, label: post.title.rendered }); }); } else { select_options.push({ value: 0, label: "読み込み中", disabled: true }); } return ( <SelectControl id="oja_posts_select" label="投稿セレクトメニュー" multiple options={select_options} value={ selectedPostId.filter((value) => select_options.includes(value)) } // value={[3528, 3305, 3342]} onChange={selectPost} /> ); };; export default withSelect((select, props) => { //現在の投稿の post ID を取得 const currentPostId = select("core/editor").getCurrentPostId(), curentPostType = select('core/editor').getCurrentPostType(); //クエリパラメータ const query = { per_page: -1, order: 'desc', status: 'publish', exclude: currentPostId, //除外する投稿 }; return { posts: select("core").getEntityRecords('postType', curentPostType, query), }; })(PostsSelect);

edit.js

javascript

//投稿を選択する関数 let postArray = []; const selectPost = (postId) => { // オプションの配列を整数にして追加 postArray.push(parseInt(postId[0])); // 配列内の重複した値をフィルタリング attributes.selectedPostId = postArray.filter((id, index, self) => self.indexOf(id) === index); console.log(attributes.selectedPostId); }; // 略。。。 return( <div className={className}>  <Placeholder label="投稿スライダー" icon="format-image" instructions="スライダーに表示する投稿を選択"  > <PostsSelect     selectedPostId={attributes.selectedPostId} selectPost={selectPost} /> </Placeholder> </div> );

試したこと

onChange プロパティとなるコールバック関数 selectPost でちゃんと属性値に値が取れているかの確認としてconsoleに出しています。問題なく属性値に保存できています
とするとやはり value プロパティが怪しいのでこちらもコメントにしてありますが、直接配列として値を渡してあげても、配列の0番目、最初の値しか取れていませんでした。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

Echo(フレームワーク)

Echoは、Go言語で作られたフレームワーク。非常に軽量で、小~中規模のアプリ構成を想定した仕様になっています。公式ドキュメントが用意されており、初心者でも始めやすい点が特徴です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。