Material-ui: [FlatButton] Не работает ввод файла с помощью кнопки.

На версии 0.7.5.

@nschaubeck У вас работает кнопка на сайте документации?

@hai-cea Да, это так. Казалось, что в DOM не было даже элемента <input> , как будто элемент кнопки не отображал своих дочерних элементов.

У меня тоже есть эта проблема. @nschaubeck Вы когда-нибудь находили решение?

@e-monson На самом деле я не смог найти решение.

это работает!
пусть стили = {
примерImageInput: {
курсор: 'указатель',
положение: «абсолютное»,
сверху: '0',
внизу: «0»,
справа: «0»,
слева: «0»,
ширина: «100%»,
непрозрачность: '0'
}
}

      <FlatButton label="Choose an Image" primary={true}>
        <input id="imageButton" style={styles.exampleImageInput} type="file"></input>
      </FlatButton>

@nikhildaga Это работает только в Chrome, поскольку размещение полей ввода в кнопках не является частью спецификации W3C.

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

handleChange: function(e){
  console.log(e.target.value)
},
_openFileDialog: function(){
  var fileUploadDom = React.findDOMNode(this.refs.fileUpload);
  fileUploadDom.click();
},
render: function() {
  return (
    <FlatButton
      label="Upload file"
      onClick={this._openFileDialog}/>
    <input
      ref="fileUpload"
      type="file" 
      style={{"display" : "none"}}
      onChange={this._handleChange}/>
  );
}

Я вижу, что эта проблема до сих пор не решена должным образом...
Решение, предложенное в документе, работает только в Chrome, как сказал @Wofiel . (все еще дело в бета-версии 15-0.2)

Не лучше ли было бы установить как htmlFor в <FlatButton> (или <RaisedButton> ), установить идентификатор для входного файла и все? Вам не нужно будет запускать щелчок вручную...
Пробовал завернуть кнопку в метку, к сожалению, не работает :(

Сейчас @Wofiel кажется лучшим решением.

Зачем закрывать это, если нет нативного решения

привет @Wofiel как вы предлагаете использовать эту технику без ссылок в компоненте без гражданства

@excalliburbd Вы можете использовать id и Jquery, это должно работать

Манипулирование домом @Birssan в ответ? все хорошо?

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

@Wofiel Как можно реагировать на версию 15?

@Wofiel с этим решением console.log(e.target.value) один получает
C:\fakepath\imagefilename.png
Лучшие решения это
e.целевые.файлы[0]

Если кто-то еще столкнется с этой проблемой, я обнаружил, что вы можете установить containerElement в RaisedButton как нечто более подходящее для наличия элемента ввода в качестве дочернего элемента. Например этикетка ;-)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" />
</RaisedButton>

@ Томас101 Спасибо! Я только что столкнулся с этой проблемой, и ваше решение, похоже, работает.
Потрясающий :)

@ Thomas101 Спасибо за совет. Это решило и мою проблему. Настоящий

Просто дополняя ответ @Thomas101 , когда я объявляю компоненты, подобные его примеру, мой RaisedButton отображается с вводом файла внутри. Чтобы этого не произошло, просто установите стиль ввода файла на display: none . :)

<RaisedButton
  containerElement='label' // <-- Just add me!
  label='My Label'>
    <input type="file" style={{ display: 'none' }} />
</RaisedButton>

@andreyluiz, при каких обстоятельствах это не работает:

<RaisedButton label='My Label'>
    <input type="file" />
</RaisedButton>

Мне не удалось найти проблему с примером сайта документации, но очевидно, что у многих других есть эта проблема!

Предполагается, что ввод файла не отображается с предоставленным вами кодом?

Это странно. В моем случае он отображает ввод файла внутри кнопки material-ui.

@andreyluiz Да, в примере сайта документации (http://www.material-ui.com/#/components/raised-button) <input> не видно. Какой браузер и версию вы тестируете?

Последняя версия Хрома.

Я согласен с @andreyluiz , тоже показывает, но с style={{display: 'none'}} это работает как шарм!

тл;др

<RaisedButton
  containerElement="label"
  icon={<Icons.FileUpload />} // material-ui-icons
  labelColor="white"
  primary
  style={{ minWidth: 40, width: 40 }}>
  <input
    onChange={e => this.upload(e.target.files[0])}
    style={{ display: 'none' }}
    type="file"
  />
</RaisedButton>

Приведенное выше решение, похоже, больше не работает. Я использую новую бета-ветвь v1, и следующее не работает для меня

                        <Button dense
                                containerElement="label"
                                label="label">
                            <input
                                onChange={e => this.upload(e.target.files[0])}
                                style={{display: 'none'}}
                                type="file"
                            />
                        </Button>

Я получаю следующую ошибку в консоли:

Warning: React does not recognize the `containerElement` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `containerelement` instead.
If you accidentally passed it from a parent component, remove it from the DOM element.

Кто-нибудь знает обходной путь? В любом случае, разве такой распространенный вариант использования не должен поддерживаться изначально? (не хакерским способом)

@ AdityaAnand1 следующий код должен работать

<Button
            raised
            component="label" <---- use component instead of containerElement
            color="primary"
            className={buttonClassname}
            disabled={this.state.loading}
            onClick={this.handleButtonClick}
          >
            {'Upload'}
            <FileUpload className={classes.rightIcon} />
            <input
              onChange={e => console.log(e.target.files[0])}
              style={{ display: 'none' }}
              type="file"
            />
</Button>