在使用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;
key
、text
和value
属性。selectedId
状态。options
、onChange
和value
等属性。Semantic-UI-React Form.Select Documentation
通过这种方式,你可以从名称的下拉选择中获取对应的id值,并在应用中使用这个id值进行后续操作。
领取专属 10元无门槛券
手把手带您无忧上云