semantic-ui-реагировать, как использовать группу форм внутри сетки

Question

Я работаю над проектом с использованием semantic-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 / collection / form / # 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' prop для 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 / collection / grid / # число-разделенное число