在使用React和Semantic-UI-React的迭代中,在Edit select上仅显示一个表单字段,可以通过设置Semantic-UI-React的Dropdown组件的options属性来实现。具体步骤如下:
下面是一个示例代码:
import React, { useState } from 'react';
import { Dropdown } from 'semantic-ui-react';
const options = [
{ label: '字段1', value: 'field1' },
{ label: '字段2', value: 'field2' },
{ label: '字段3', value: 'field3' },
];
const MyForm = () => {
const [selectedField, setSelectedField] = useState('');
const handleFieldChange = (event, data) => {
setSelectedField(data.value);
};
return (
<Dropdown
options={options}
selection
onChange={handleFieldChange}
value={selectedField}
/>
);
};
export default MyForm;
在上述示例中,我们创建了一个名为options的数组,其中包含三个表单字段对象。然后,我们在MyForm组件中使用Dropdown组件,并将options数组作为options属性的值传递给它。我们还将selection属性设置为true,以使其以选择模式显示。通过onChange事件处理程序,我们可以获取用户选择的值,并将其存储在selectedField状态变量中。
这样,当用户选择一个表单字段时,Dropdown组件将只显示所选字段的文本。你可以根据实际需求修改options数组中的字段,并根据需要进行样式和布局的调整。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云