如何使用 JSON 数据填充 React Select? [英] How to populate React Select with JSON data?

问题描述

如何使用以下没有 react-select 的 JSON 数据填充选项code>value 和 label 属性?

<预><代码>[{排序代码":55-77-42"，帐号":08488234"，帐户类型":储蓄帐户"，帐户名称":曼努埃尔山姆"},{排序代码":12-43-98"，帐号":12365432"，帐户类型":储蓄帐户"，账户名":约翰塞纳"},{排序代码":87-20-51"，帐号":76491234"，帐户类型":储蓄帐户"，帐户名称":Shweta Pandey"},{排序代码":56-73-39"，帐号":09865479"，帐户类型":储蓄帐户"，帐户名":普雷娜·辛格"}]

解决方案

您可以提供 getOptionLabel 和 getOptionValue 道具到 反应选择:

从反应"导入反应；import 从react-select"中选择；常量选项 = [{排序代码:55-77-42-56"，帐号:0848890234"，accountType: 储蓄账户",帐户名称:XYZ Sam"}//...];导出默认值 () =>{const [value, setValue] = React.useState({});返回 (<选择名称=帐户"选项={选项}价值={价值}onChange={setValue}getOptionLabel={(option) =>option.accountName}getOptionValue={(option) =>option.accountNumber}//它应该是选项中的唯一值.例如.ID/>);};

演示

How to populate options in react-select using the below JSON data which doesn't have value and label properties?

[       
    {
        "sortCode": "55-77-42",
        "accountNumber": "08488234",
        "accountType": "Savings Account",
        "accountName": "Mannuel Sam"
    },
    {
        "sortCode": "12-43-98",
        "accountNumber": "12365432",
        "accountType": "Savings Account",
        "accountName": "John Cena"
    },
    {
        "sortCode": "87-20-51",
        "accountNumber": "76491234",
        "accountType": "Savings Account",
        "accountName": "Shweta Pandey"
    },
    {
        "sortCode": "56-73-39",
        "accountNumber": "09865479",
        "accountType": "Savings Account",
        "accountName": "Prerna Singh"
    }
]

解决方案

You can provide getOptionLabel and getOptionValue props to react-select:

import React from "react";
import Select from "react-select";

const options = [
  {
    sortCode: "55-77-42-56",
    accountNumber: "0848890234",
    accountType: "Savings Account",
    accountName: "XYZ Sam"
  }
  // ...
];

export default () => {
  const [value, setValue] = React.useState({});

  return (
      <Select
        name="accounts"
        options={options}
        value={value}
        onChange={setValue}
        getOptionLabel={(option) => option.accountName}
        getOptionValue={(option) => option.accountNumber} // It should be unique value in the options. E.g. ID
      />
  );
};

Demo

这篇关于如何使用 JSON 数据填充 React Select?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！