自定义控制字段不呈现 <select> 选项
Custom Control Field does not render <select> options
我正在努力 Field with Custom Control 严格按照官方教程实施。但是,尽管我的代码非常接近原始代码,但它呈现空 <select>
元素且 options
属性等于 [object Object],[object Object],[object Object]
而不是呈现填充了我的选项的下拉菜单:
const { useState } = React,
{ render } = ReactDOM,
{ Form } = semanticUIReact
const InputsBlock = () => {
const selectOptions = [
{key: 'option1', text: 'Option 1', value: 'Option 1'},
{key: 'option2', text: 'Option 2', value: 'Option 2'},
{key: 'option3', text: 'Option 3', value: 'Option 3'}
],
fields = [
{label: 'Param 1', key: 'param1', control: 'Input'},
{label: 'Param 2', key: 'param2', control: 'Input'},
{label: 'Param 3', key: 'param3', control: 'Select', options: selectOptions}
]
return (
<Form.Group widths="equal">
{
fields.map(({control,label,key,options}) => (
<Form.Group inline>
<Form.Field {...{key,control,label,...(control=='Select' && {options})}} />
</Form.Group>
))
}
</Form.Group>
)
}
const MyForm = () => {
return (
<Form>
<InputsBlock />
</Form>
)
}
render (
<MyForm />,
document.getElementById('root')
)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.88.2/semantic-ui-react.min.js"></script><div id="root" style="margin:20px"></div>
在您的字段数组中,控件不是字符串。相反,它应该是实际的语义-ui-react 组件。
将 "fields" 更改为以下 -
import { Form, Select, Input } from "semantic-ui-react";
fields = [
{ label: "Param 1", key: "param1", control: Input },
{ label: "Param 2", key: "param2", control: Input },
{
label: "Param 3",
key: "param3",
control: Select,
options: selectOptions
}
];
这是相同的工作代码 - https://codesandbox.io/s/optimistic-haslett-glvkf
我正在努力 Field with Custom Control 严格按照官方教程实施。但是,尽管我的代码非常接近原始代码,但它呈现空 <select>
元素且 options
属性等于 [object Object],[object Object],[object Object]
而不是呈现填充了我的选项的下拉菜单:
const { useState } = React,
{ render } = ReactDOM,
{ Form } = semanticUIReact
const InputsBlock = () => {
const selectOptions = [
{key: 'option1', text: 'Option 1', value: 'Option 1'},
{key: 'option2', text: 'Option 2', value: 'Option 2'},
{key: 'option3', text: 'Option 3', value: 'Option 3'}
],
fields = [
{label: 'Param 1', key: 'param1', control: 'Input'},
{label: 'Param 2', key: 'param2', control: 'Input'},
{label: 'Param 3', key: 'param3', control: 'Select', options: selectOptions}
]
return (
<Form.Group widths="equal">
{
fields.map(({control,label,key,options}) => (
<Form.Group inline>
<Form.Field {...{key,control,label,...(control=='Select' && {options})}} />
</Form.Group>
))
}
</Form.Group>
)
}
const MyForm = () => {
return (
<Form>
<InputsBlock />
</Form>
)
}
render (
<MyForm />,
document.getElementById('root')
)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.88.2/semantic-ui-react.min.js"></script><div id="root" style="margin:20px"></div>
在您的字段数组中,控件不是字符串。相反,它应该是实际的语义-ui-react 组件。
将 "fields" 更改为以下 -
import { Form, Select, Input } from "semantic-ui-react";
fields = [
{ label: "Param 1", key: "param1", control: Input },
{ label: "Param 2", key: "param2", control: Input },
{
label: "Param 3",
key: "param3",
control: Select,
options: selectOptions
}
];
这是相同的工作代码 - https://codesandbox.io/s/optimistic-haslett-glvkf