reactjs - 如何在一个语义 UI 手风琴下制作多个表单字段？

Question

我想在语义 UI 反应中隐藏一个手风琴下的多个表单字段，但该示例仅在手风琴下显示一个表单字段“Maiden Name”。无论我尝试什么，我都无法在第一个表单字段下显示第二个表单字段。

代码沙箱可在此处找到：https ://codesandbox.io/s/0p0w5?module=/example.js&file=/example.js

import React from 'react'
import { Accordion, Button, Form, Segment } from 'semantic-ui-react'

const panels = [
  {
    key: 'details',
    title: 'Optional Details',
    content: {
      as: Form.Input,
      label: 'Maiden Name',
      placeholder: 'Maiden Name',
    },
  },
]

const AccordionExampleForm = () => (
  <Segment>
    <Form>
      <Form.Group widths={2}>
        <Form.Input label='First Name' placeholder='First Name' />
        <Form.Input label='Last Name' placeholder='Last Name' />
      </Form.Group>
      <Accordion as={Form.Field} panels={panels} />

      <Button secondary>Sign Up</Button>
    </Form>
  </Segment>
)

export default AccordionExampleForm

先感谢您。

标签： reactjssemantic-uisemantic-ui-react