react-adminのReferenceInputフィールドの選択肢のテキストをフォーマットするにはどうすればよいですか?

elsni

SelectInputと組み合わせたReferenceInputフィールドでは、次のように列の名前を指定することにより、参照されるリソースの列からオプションテキストを入力できます。

<ReferenceInput label="Location name" source="id" reference="Location">
 <SelectInput optionText={"building"} />
</ReferenceInput>

複数の列のオプションテキストを結合したいのですが、現在のレコードにアクセスする方法がわかりません。私はこのコードのようなことを達成したいと思っています(もちろん、私が何を意味するかを示すためだけに、それは機能しません):

<ReferenceInput label="Location name" source="id" reference="Location">
 <SelectInput optionText=`${record.building} ${record.room}` />
</ReferenceInput>
フランソワ・ザニノット

optionText 関数も受け入れるので、オプションのテキストを自由に形作ることができます。

const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
<SelectInput source="author_id" choices={choices} optionText={optionRenderer} />

optionTextまた、React Elementを受け入れます。これは複製され、関連する選択肢をrecord小道具として受け取ります。そこでフィールドコンポーネントを使用できます。

const choices = [
   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' },
   { id: 456, first_name: 'Jane', last_name: 'Austen' },
];
const FullNameField = ({ record }) => <span>{record.first_name} {record.last_name}</span>;
<SelectInput source="gender" choices={choices} optionText={<FullNameField />}/>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ReactのマテリアルUIを使用してonFocusイベントのテキストフィールドでテキストの一部を選択するにはどうすればよいですか?

分類Dev

元の文字列が姓、名の場合、テキストフィールドに名を表示するにはどうすればよいですか?React / Spfx

分類Dev

reactを使用してテキスト入力フィールドの値を取得するにはどうすればよいですか

分類Dev

Reactフォームのコンストラクターでコンテキストを使用するにはどうすればよいですか?

分類Dev

マテリアルUIを使用するReactでグローバルフォントの色を設定するにはどうすればよいですか?

分類Dev

react-adminのリストビューに永続的なフィルター機能を追加するにはどうすればよいですか?

分類Dev

React Final Form Field Arrayを使用してチェックボックスフィールドの値をフォーマットするにはどうすればよいですか?

分類Dev

ReactマテリアルUIカード「MuiCardContent-root:last-child」のデフォルトのパディングボトムでパディングボトムを削除するにはどうすればよいですか?

分類Dev

Reactでボタンがクリックされたときに入力フィールドの任意の場所にテキストを直接挿入するにはどうすればよいですか?

分類Dev

REACT.jsのボタンをクリックしてフォームフィールドを変更するにはどうすればよいですか?

分類Dev

React:APIから選択データを取得して別のAPIに投稿し、送信時にフィールドをクリアするフォームを作成するにはどうすればよいですか?

分類Dev

サードパーティのreactコンポーネントのデフォルトスタイルを上書きするにはどうすればよいですか?

分類Dev

React JSでマテリアルUIプロップ関数のデフォルト値を変更するにはどうすればよいですか?

分類Dev

react js-JSXで入力テキストフィールドを動的に作成するにはどうすればよいですか?

分類Dev

レルムreact-nativeでネストされたフォルダーのような構造を作成するにはどうすればよいですか?

分類Dev

ReactのuseRefから入力フィールドをリセットするにはどうすればよいですか?

分類Dev

Reactで、配列の一部であるフォームのフィールドに名前を付けるにはどうすればよいですか?

分類Dev

React Nativeのリストに入力フィールドを追加するにはどうすればよいですか?

分類Dev

Reactフォームコンポーネントの選択メニューにデフォルト値を設定するにはどうすればよいですか?

分類Dev

reactのドロップダウン値に基づいてブートストラップテーブルをフィルタリングするにはどうすればよいですか?

分類Dev

react-virtuaizedテーブルの行のチェックボックスを選択するにはどうすればよいですか?

分類Dev

Reactのトグルスイッチコンポーネント内にテキストを追加するにはどうすればよいですか?

分類Dev

Reactでテキストの選択/ハイライトの色(通常は:: selection)を変更するにはどうすればよいですか?

分類Dev

フィールド/列名がない場合にreact-adminのChipFieldを使用するにはどうすればよいですか?

分類Dev

React Webアプリでモバイルのデフォルトピッカーを使用するにはどうすればよいですか?

分類Dev

フォーマットされたReactコンポーネントの小道具を渡すにはどうすればよいですか?

分類Dev

メニューリストのどの項目がMaterialUI Reactで選択されているかを表示するにはどうすればよいですか?

分類Dev

Meteor + Reactのコレクションフィールドからテキストプレビューをレンダリングするにはどうすればよいですか?

分類Dev

Reactでテーブルの要素をリストするにはどうすればよいですか?

Related 関連記事

  1. 1

    ReactのマテリアルUIを使用してonFocusイベントのテキストフィールドでテキストの一部を選択するにはどうすればよいですか?

  2. 2

    元の文字列が姓、名の場合、テキストフィールドに名を表示するにはどうすればよいですか?React / Spfx

  3. 3

    reactを使用してテキスト入力フィールドの値を取得するにはどうすればよいですか

  4. 4

    Reactフォームのコンストラクターでコンテキストを使用するにはどうすればよいですか?

  5. 5

    マテリアルUIを使用するReactでグローバルフォントの色を設定するにはどうすればよいですか?

  6. 6

    react-adminのリストビューに永続的なフィルター機能を追加するにはどうすればよいですか?

  7. 7

    React Final Form Field Arrayを使用してチェックボックスフィールドの値をフォーマットするにはどうすればよいですか?

  8. 8

    ReactマテリアルUIカード「MuiCardContent-root:last-child」のデフォルトのパディングボトムでパディングボトムを削除するにはどうすればよいですか?

  9. 9

    Reactでボタンがクリックされたときに入力フィールドの任意の場所にテキストを直接挿入するにはどうすればよいですか?

  10. 10

    REACT.jsのボタンをクリックしてフォームフィールドを変更するにはどうすればよいですか?

  11. 11

    React:APIから選択データを取得して別のAPIに投稿し、送信時にフィールドをクリアするフォームを作成するにはどうすればよいですか?

  12. 12

    サードパーティのreactコンポーネントのデフォルトスタイルを上書きするにはどうすればよいですか?

  13. 13

    React JSでマテリアルUIプロップ関数のデフォルト値を変更するにはどうすればよいですか?

  14. 14

    react js-JSXで入力テキストフィールドを動的に作成するにはどうすればよいですか?

  15. 15

    レルムreact-nativeでネストされたフォルダーのような構造を作成するにはどうすればよいですか?

  16. 16

    ReactのuseRefから入力フィールドをリセットするにはどうすればよいですか?

  17. 17

    Reactで、配列の一部であるフォームのフィールドに名前を付けるにはどうすればよいですか?

  18. 18

    React Nativeのリストに入力フィールドを追加するにはどうすればよいですか?

  19. 19

    Reactフォームコンポーネントの選択メニューにデフォルト値を設定するにはどうすればよいですか?

  20. 20

    reactのドロップダウン値に基づいてブートストラップテーブルをフィルタリングするにはどうすればよいですか?

  21. 21

    react-virtuaizedテーブルの行のチェックボックスを選択するにはどうすればよいですか?

  22. 22

    Reactのトグルスイッチコンポーネント内にテキストを追加するにはどうすればよいですか?

  23. 23

    Reactでテキストの選択/ハイライトの色(通常は:: selection)を変更するにはどうすればよいですか?

  24. 24

    フィールド/列名がない場合にreact-adminのChipFieldを使用するにはどうすればよいですか?

  25. 25

    React Webアプリでモバイルのデフォルトピッカーを使用するにはどうすればよいですか?

  26. 26

    フォーマットされたReactコンポーネントの小道具を渡すにはどうすればよいですか?

  27. 27

    メニューリストのどの項目がMaterialUI Reactで選択されているかを表示するにはどうすればよいですか?

  28. 28

    Meteor + Reactのコレクションフィールドからテキストプレビューをレンダリングするにはどうすればよいですか?

  29. 29

    Reactでテーブルの要素をリストするにはどうすればよいですか?

ホットタグ

アーカイブ