[解決済み] React - 入力型ファイル セマンティックUI React

質問

ファイルアップロードを実装しようとしていますが サイア <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にアクセスすることができます。 こちら をご覧いただくと、より視覚的にわかりやすいと思います。

をクリックすると Choose File SUIR の実装例では、ユーザーが自分のシステムからファイルを選択するように促されませんが、通常の html <input> があります。どうすれば <Input type="file ...> を意味的に同じように動作させることができます。

どのように解決するのですか？

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のrefです。 React.createRef() メソッドを使用します。 これを確認するには コードとボックスの例 を、上記の解決策と一緒に使うことができます。