Semantic-UI-React: Form.Field正在破坏布局

Question

我正在开发一个表单来创建一个新产品，我需要一个包含3个equals字段的行，但我不能使用React语义Ui来实现。

如何使用react语义ui编写3个相等的输入字段？

这就是我尝试过的：

import { Form, Input, Button, TextArea, Header, Icon } from "semantic-ui-react";

function CreateProduct() {
  return (
    <>
      <Header as="h2" block>
        <Icon name="add square" color="violet" />
        Cadastrar Produto
      </Header>
      <Form>
        <Form.Group widths="equal">
          <Form.Field
            control={Input}
            name="name"
            label="Nome"
            placeholder="Nome do Produto"
          />
          <Form.Field
            control={Input}
            name="price"
            label="Preço"
            placeholder="Preço"
            min="0.00"
            step="0.10"
            type="number"
          />
          <Form.Field
            control={Input}
            name="media"
            type="file"
            label="Imagem"
            accept="image/*"
            content="Escolha Imagem"
          />
        </Form.Group>
        <Form.Field
          control={TextArea}
          name="description"
          label="Descrição"
          placeholder="Descrição do Produto"
        />
        <Form.Field
          control={Button}
          inverted
          color="violet"
          icon="pencil alternate"
          content="Cadastrar"
          type="submit"
        />
      </Form>
    </>
  );
}

export default CreateProduct;

我得到的输出是：

​

​

看到第三个输入"Imagem“了吗？

字段似乎没有遵循semanctic-react-ui document中的Form.Group属性widths='equal‘

Answer 1

此布局因file类型内容而超出。也许你可以试着用这种方式来得到那个布局

import React, { Component } from "react";
import { Form, Input, Button, TextArea } from "semantic-ui-react";

class FormExample extends Component {
  fileInputRef = React.createRef();
  render() {
    return (
      <Form>
        <Form.Group widths="equal">
          <Form.Field
            control={Input}
            name="name"
            label="Nome"
            placeholder="Nome do Produto"
          />
          <Form.Field
            control={Input}
            name="price"
            label="Preço"
            placeholder="Preço"
            min="0.00"
            step="0.10"
            type="number"
          />
          <Form.Field>
            <label>Imagem</label>
            <Button
              style={{ width: "100%" }}
              content="Choose File"
              labelPosition="left"
              icon="file"
              onClick={() => this.fileInputRef.current.click()}
            />
            <input
              ref={this.fileInputRef}
              type="file"
              hidden
              onChange={this.fileChange}
            />
          </Form.Field>
        </Form.Group>
        <Form.Field
          control={TextArea}
          name="description"
          label="Descrição"
          placeholder="Descrição do Produto"
        />
        <Form.Field
          control={Button}
          inverted
          color="violet"
          icon="pencil alternate"
          content="Cadastrar"
          type="submit"
        />
      </Form>
    );
  }
}

export default FormExample;

demo：https://codesandbox.io/s/zen-frost-9ihqw (调整屏幕大小全屏)

Answer 2

我找到了一个很好的解决方案，只需在第二个道具上添加“流体”道具。

<Form.Field
  fluid
  control={Input}
  name="price"
  label="Preço"
  placeholder="Preço"
  min="0.00"
  step="0.10"
  type="number"
/>