React - тип входного файла Semantic UI React - PullRequest
Новая
       12

React - тип входного файла Semantic UI React

3 голосов
/ 02 апреля 2019

Я пытаюсь осуществить загрузку файла, но использую 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>

Вы можете посетить коды и поле здесь , чтобы лучше понять, о чем я говорю.

Когда я нажимаю Choose File в примере реализации SUIR, он не предлагает пользователю выбрать файл из своей системы, тогда как обычный html <input> делает. Я не уверен, как заставить <Input type="file ...> в семантике вести себя так же.

Ответы [ 2 ]

3 голосов
/ 02 апреля 2019

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, созданная React.createRef() метод.Вы можете проверить этот код и окно примера с помощью вышеуказанного решения.

1 голос
/ 02 апреля 2019

Ответ от 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} />
...