Javascript 语义UI反应：表单.字段正在破坏布局

我正在制作一个表单来创建一个新产品，我需要一个包含3个相等字段的行，但我没有使用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;

从“语义ui”导入{表单、输入、按钮、文本区域、标题、图标}；
函数CreateProduct（）{
返回(
地籍产品
);
}
导出默认产品；

我得到的结果是：

请参阅第三个输入“Imagem”

---

该字段似乎没有遵循表单。组道具宽度class='equal'来自由于

文件
类型内容，此布局被超出。
也许你可以试着用这种方法来获得这种布局

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;


import React，{Component}来自“React”；
从“语义ui react”导入{Form，Input，Button，TextArea}；
类FormExample扩展组件{
fileInputRef=React.createRef（）；
render（）{
返回(
图像
this.fileInputRef.current.click（）}
/>
);
}
}
导出默认格式示例；

演示：（调整屏幕大小以获得全视图）
我发现了一个很好的解决方案，只需在第二个屏幕上添加“流体”道具

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



感谢您的回复，但我找到了一个在Form.Field中添加流体支撑的解决方案。现在一切正常！好的@sydbhat<代码>流体
当我有输入类型
文件
时，道具对我不起作用。如果它对你有用，那真的很好。它对图像输入文件也不起作用，@danielprabhakaran-n。但我设法在价格输入文件中加入流体，得到同样的结果。但你给我展示了另一种我将来会用到的好方法。如果我有足够的声誉，我会回答这是有用的，但我不能这样做哈哈！