Question

我正在使用语义UI反应来开发一个项目。该页面有很多输入。我想将整个页面分为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引导网格。

在此处查看示例：https://react.semantic-ui.com/collections/grid/#types-divided-number

语义UI反应如何在网格内使用表单组

2 个答案: