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

Question

我正在做一个使用语义-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

我认为 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

Answer 2

使用样式指南示例：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 组件，这可能是问题所在：

When using the widths='equal' prop declaration on a Form.Group, all child Form.Dropdown, Form.Input, Form.Select components must be rendered with a fluid prop to work correctly.

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

semantic-ui-react how to use form group inside a grid

css

reactjs

redux

redux-form

semantic-ui-react