React - 输入类型文件Semantic UI React

Question

我正在尝试实现文件上传，但使用SUIR <Input>，按钮，标签等。

这完全是关于渲染中元素的使用。

使用常规html <label>和<input>元素，此过程按预期工作。

  <Form.Field>
    <label>File input & upload for dataschemas & datasources</label>
    <input type="file" onChange={this.fileChange} />
    <Button type="submit">Upload</Button>
  </Form.Field>

现在我正在尝试使用SUIR <Input>元素，以及一些带有<Button>元素的道具用于造型。

  <Form.Field>
    <label>File input & upload </label>
    <Input type="file" onChange={this.fileChange}>
      <Button
        content="Choose File"
        labelPosition="left"
        icon="file"
      />
    </Input>
    <Button type="submit">Upload</Button>
  </Form.Field>

您可以访问codesandbox here，以更好地了解我正在谈论的内容。

当我在SUIR实现示例中单击Choose File时，它不会提示用户从他们的系统中选择一个文件，而常规的html <input>会这样做。我不确定如何在语义上获得<Input type="file ...>以同样的方式行事。

Answer 1

SUIR不提供开箱即用的FileInput按钮解决方案。但是您可以轻松创建自己的按钮实现。例如，通常通过使用hidden文件输入和一个按钮来完成，当用户点击它时触发隐藏的输入点击：

  <Button
    content="Choose File"
    labelPosition="left"
    icon="file"
    onClick={() => this.fileInputRef.current.click()}
  />
  <input
    ref={this.fileInputRef}
    type="file"
    hidden
    onChange={this.fileChange}
  />

其中this.fileInputRef是由React.createRef()方法创建的React ref。您可以使用上述解决方案检查此codesandbox example。

Answer 2

GProst的答案非常有效。在另一种情况下，您可能不想创建ref来实现此文件输入按钮。

下面的解决方案使用htmlFor道具并将id传递给<input>。不使用ref消除了额外的JS，以及按钮和输入之间不必要的通信。

<Button as="label" htmlFor="file" type="button">
  Some button stuff
</Button>
<input type="file" id="file" style={{ display: "hidden" }} onChange={this.onChange} />