尝试使用带有Semantic-UI-React的Form.Select从名称的下拉选择中获取id值？

在使用Semantic-UI-React的Form.Select组件时，如果你想从名称的下拉选择中获取对应的id值，可以通过以下步骤实现：

基础概念

Semantic-UI-React是一个React UI组件库，提供了丰富的UI组件，包括Form.Select。Form.Select组件用于创建下拉选择框。

类型

Form.Select组件可以接受多种类型的选项，包括简单的字符串数组和包含对象的数组。

应用场景

适用于需要用户从预定义选项中选择一个值的场景，例如选择国家、城市、角色等。

示例代码

假设你有一个包含名称和id的对象数组，如下所示：

const options = [
  { key: '1', text: 'Alice', value: '1' },
  { key: '2', text: 'Bob', value: '2' },
  { key: '3', text: 'Charlie', value: '3' }
];

你可以使用Form.Select组件来渲染这个下拉选择框，并在选择时获取对应的id值：

import React, { useState } from 'react';
import { Form } from 'semantic-ui-react';

const MyForm = () => {
  const [selectedId, setSelectedId] = useState('');

  const handleChange = (e, { value }) => {
    setSelectedId(value);
  };

  return (
    <Form>
      <Form.Select
        label="Select a person"
        options={options}
        placeholder="Select a person"
        onChange={handleChange}
        value={selectedId}
      />
      <p>Selected ID: {selectedId}</p>
    </Form>
  );
};

export default MyForm;

解释

options：这是一个包含选项的对象数组，每个对象包含key、text和value属性。
handleChange：这是一个事件处理函数，当用户选择一个选项时，它会更新selectedId状态。
Form.Select：这是Semantic-UI-React的Form.Select组件，它接受options、onChange和value等属性。