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

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

新規登録して質問してみよう
ただいま回答率
85.44%
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ブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

968閲覧

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

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ブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿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

1import { withSelect } from '@wordpress/data'; 2import { SelectControl } from "@wordpress/components"; 3 4const PostsSelect = (props) => { 5 const { posts, selectedPostId, selectPost } = props; 6 7 //SelectControl の options プロパティに指定する投稿のタイトルとIDから成るオブジェクトの配列 8 let select_options = []; 9 if (posts) { 10 select_options.push({ value: 0, label: "投稿を選択", disabled: true }); 11 posts.forEach((post) => { 12 select_options.push({ value: post.id, label: post.title.rendered }); 13 }); 14 } else { 15 select_options.push({ value: 0, label: "読み込み中", disabled: true }); 16 } 17 18 return ( 19 <SelectControl 20 id="oja_posts_select" 21 label="投稿セレクトメニュー" 22 multiple 23 options={select_options} 24 value={ selectedPostId.filter((value) => select_options.includes(value)) } 25 // value={[3528, 3305, 3342]} 26 onChange={selectPost} 27 /> 28 ); 29};; 30 31export default withSelect((select, props) => { 32 //現在の投稿の post ID を取得 33 const currentPostId = select("core/editor").getCurrentPostId(), 34 curentPostType = select('core/editor').getCurrentPostType(); 35 //クエリパラメータ 36 const query = { 37 per_page: -1, 38 order: 'desc', 39 status: 'publish', 40 exclude: currentPostId, //除外する投稿 41 }; 42 return { 43 posts: select("core").getEntityRecords('postType', curentPostType, query), 44 }; 45})(PostsSelect);

edit.js

javascript

1//投稿を選択する関数 2 let postArray = []; 3 const selectPost = (postId) => { 4 // オプションの配列を整数にして追加 5 postArray.push(parseInt(postId[0])); 6 // 配列内の重複した値をフィルタリング 7 attributes.selectedPostId = postArray.filter((id, index, self) => self.indexOf(id) === index); 8 console.log(attributes.selectedPostId); 9 }; 10 11// 略。。。 12return( 13<div className={className}> 14 <Placeholder 15 label="投稿スライダー" 16 icon="format-image" 17 instructions="スライダーに表示する投稿を選択" 18 > 19 <PostsSelect 20    selectedPostId={attributes.selectedPostId} 21 selectPost={selectPost} 22 /> 23 </Placeholder> 24</div> 25);

試したこと

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ありがとうございました。
KazuhiroHatano様のヒントをもとに解決しました

以下解決方法です
まず onChange プロパティのメソッドを変更しました。(もっといい方法がありそうですが)

javascript

1//投稿を選択する関数 2 const postArray = useRef([]); 3 const selectPost = (postId) => { 4 if (postArray.current.includes(parseInt(postId[0]))) { 5 let index = postArray.current.indexOf(parseInt(postId[0])); 6 postArray.current.splice(index, 1); 7 setAttributes({ selectedPostId: postArray.current}); 8 } else { 9 postArray.current.push(parseInt(postId[0])); 10 setAttributes({ selectedPostId: postArray.current}); 11 } 12 };

そしてコンポーネント側も配列を受け取るだけに変更

javascript

1 return ( 2 <SelectControl 3 id="oja_posts_select" 4 label="投稿セレクトメニュー" 5 multiple 6 options={select_options} //投稿データの配列 7 value={ selectedPostId } //更新された配列 8 onChange={selectPost} //値の更新メソッド 9 /> 10 );

React は付け焼き刃で学んでいましたが、やはり基礎から勉強したほうが良さそうですね、
どうしてこうなるか、、の理解がまだふわふわしているので、、

投稿2022/04/06 22:33

ojakomaru

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

attributes がブロックのそれであるならば
setAttributesを使わずに直にattributesの値を書き換えても
他のどこかでattributesが更新されたときに変更が取り消されてしまうかと思います。
attributesの値の更新はsetAttributesを使うようにしてください。

ブロックのeditはレンダリングの度に実行されます
つまりlet postArray = [];もレンダリングの度に実行され
都度postArrayは空になるってことです。

postArrayもattributesの一つとするか、
あるいはuseRefを用いてコンポーネント内で
同一オブジェクトを持ち回れるようにするなどの措置が必要です。

投稿2022/04/06 01:30

KazuhiroHatano

総合スコア7819

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問