javascript - React - 输入类型文件 Semantic UI React

Question

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

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

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

  <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> 的 Prop 样式元素。

  <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以便更好地了解我在说什么。

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

Answer 1

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

  <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 引用。你可以查看这个codesandbox example使用上述解决方案。