Question

我正在创建新产品的表单，我需要一行包含3个equals字段，但是我无法使用React Semantic 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”吗？

似乎该字段未遵循Form.Group props widths ='equal'from semanctic-react-ui document

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;

演示：https://codesandbox.io/s/zen-frost-9ihqw（将屏幕尺寸调整为全屏显示）

Answer 2

我发现了一个很好的解决方案，只需在第二个上添加“ Fluid”道具即可。

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

语义用户界面反应：Form.Field正在中断布局

2 个答案: