自定義控件字段不呈現<select>選項

Question

我正在嘗試嚴格按照官方教程使用自定義控件實現字段。 但是，盡管我的代碼非常接近原始代碼，但它呈現了空<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>

Answer 1

在您的字段數組中，控件不是字符串。 相反，它應該是實際的語義用戶界面反應組件。

將“字段”更改為以下 -

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