Mantine React Combobox 如何获取密钥。表单下拉选项

Question

  const listOptions = filteredOptions.map((item) => (
    <Combobox.Option value={item.label} key={`${item.id}`}>
      {item.label}
    </Combobox.Option>
  ));

  return (
    <Combobox
      onOptionSubmit={(value, (Ideally key is here) => {
        console.log('value', value);
        console.log('key', key); <-- how do I fetch this value?
      }}

鉴于我的密钥是我的项目的 ID，我想从我的 Combobox.Option 中获取密钥值。我目前找不到任何优雅的方法来做到这一点。有什么建议吗？

Answer 1

  const opts = [
    { id: 1, label: 'Option 1' },
    { id: 2, label: 'Option 2' },
    { id: 3, label: 'Option 3' },
  ];

  return (
    <Combobox
      onOptionSubmit={(val) => {
        const { id, label } = JSON.parse(val);
        console.log('Selected label:', label);
        console.log('Corresponding id:', id);
      }}
    >
      {opts.map((i) => (
        <Combobox.Option
          value={JSON.stringify({ id: i.id, label: i.label })}
          key={i.id}
        >
          {i.label}
        </Combobox.Option>
      ))}
    </Combobox>
  );