semantic-ui-如何在网格中使用表单组

Question

我正在使用semantic-ui-react进行项目。该页面有很多输入。我想将整个页面分成3列。以下是我的实施。

render() {
return (
    <Form>  
        <Grid columns={3} divided>  
            <Grid.Row>
                <Grid.Column stretched>
                    <Segment>
                        <Form.Group widths="equal">
                            <Field name="title" component={renderFieldInput} label="Enter Title"/>
                            <Field name="test" component={renderFieldInput} label="Enter Title"/>
                        </Form.Group>
                    </Segment>
                </Grid.Column>
                <Grid.Column stretched>
                    <Segment>
                        test2
                    </Segment>
                </Grid.Column>
                <Grid.Column stretched>
                    <Segment>
                        test3
                    </Segment>
                </Grid.Column>  
            </Grid.Row>
        </Grid>
    </Form>
);

}

布局变成了

细分无法保留for组。任何帮助表示赞赏。谢谢。

Answer 1

使用样式指南样本：https://react.semantic-ui.com/collections/form/#group-variations-evenly-divided-group

我用以下代码修改了示例：

import React from 'react'
import { Form, Input, Grid, Segment } from 'semantic-ui-react'

const FormExampleEvenlyDividedGroup = () => (
  <Form>
    <Grid columns={3} divided>
      <Grid.Row>
        <Grid.Column stretched>
          <Segment>
            <Form.Group widths='equal'>
              <Form.Field>
                <label>First name</label>
                <Input fluid placeholder='First name' />
              </Form.Field>
              <Form.Field>
                <label>Last name</label>
                <Input fluid placeholder='Last name' />
              </Form.Field>
            </Form.Group>
          </Segment>
        </Grid.Column>
        <Grid.Column stretched>
          <Segment />
        </Grid.Column>
        <Grid.Column stretched>
          <Segment />
        </Grid.Column>
      </Grid.Row>
    </Grid>
  </Form>
)

export default FormExampleEvenlyDividedGroup

它似乎工作。但是，您没有共享您的renderFieldInput组件，这可能是问题：

当在widths='equal'上使用Form.Group道具声明时，所有儿童Form.Dropdown，Form.Input，Form.Select组件必须使用fluid道具才能正常工作。

Answer 2

我相信Grid.Column需要生活在Grid.Row和Grid组件中，如下所示：

  <Grid columns={3} divided>
    <Grid.Row>
      <Grid.Column>
         <Segment>
           Test1
         </Segment>
      </Grid.Column>
      <Grid.Column>
         <Segment>
           Test2
         </Segment>
      </Grid.Column>
      <Grid.Column>
         <Segment>
           Test3
         </Segment>
      </Grid.Column>
    </Grid.Row>
 </Grid>

类似于Twitter bootstrap网格。

请参阅此处的示例：https://react.semantic-ui.com/collections/grid/#types-divided-number