Пользовательский интерфейс материала: загрузка файлов с использованием ButtonBase - PullRequest
Новая
       7

Пользовательский интерфейс материала: загрузка файлов с использованием ButtonBase

0 голосов
/ 23 сентября 2018

В документации по пользовательскому интерфейсу материала они показали, как создать кнопку «Загрузить», скрыв входной файл, а затем добавив компонент Button внутри метки.(см .: https://material -ui.com / demos / buttons / )

Теперь я хочу другую кнопку, поэтому я работаю с ButtonBase, но она не работает - выбор файлавсплывающее окно не отображается.Я не уверен, что мне что-то не хватает, может быть, мне не хватает какого-то параметра для его передачи? 

<input
    accept="image/*"
    className="d-none"
    id="image-upload"
    type="file"
  />
  <label htmlFor="image-upload"
    className="d-block" >
    <Button component="span">
      Upload
    </Button> {/* working */}
    <ButtonBase>
      test
    </ButtonBase>  {/* not working*/}
 </label>

ButtonBase API: https://material -ui.com / api / button-база /

Ответы [ 2 ]

0 голосов
/ 18 июня 2019

то же самое можно реализовать с помощью хуков 

export default function myForm(props) { 
 const inputEl = React.useRef(null);
  const onButtonClick = () => {
    console.log("inside")
    // `current` points to the mounted file input element
    inputEl.current.click();
  };

  return (
    <React.Fragment>
        Upload Photos
          <br/>
          <input
        accept="image/*"
        className={classes.input}
        id="outlined-button-file"
        multiple
        type="file"
        ref={inputEl}
      />
      <label htmlFor="outlined-button-file">

        <ButtonBases
        onClick={()=>onButtonClick()}
        />
      </label>
    </React.Fragment>
)}

Не забудьте вызвать onClick внутри компонента ButtonBasses. 

export default function ButtonBases(props) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
       <ButtonBase
          ...
          onClick={props.onClick}
        >
          ....
        </ButtonBase>
      ))}
    </div>
  );
}
0 голосов
/ 23 сентября 2018

Во-первых, какую версию вы используете?Material-UI - это очень быстрый проект, поэтому вам нужно убедиться, что вы проверяете документацию на любую версию, в которой вы находитесь.

Я предпочитаю использовать явные события (ref в этомдело), ​​и это работает для меня в 3.1.0 

<input 
  ref={'file-upload'}
  type='file'
/>
<ButtonBase
  onClick={e => {
    this.refs['file-upload'].click()
  }}
>
  <div style={{
    color: 'red',
    backgroundColor: 'yellow',
    border: '1px solid green',
  }}
  >
    Upload!
  </div>
</ButtonBase>
<hr />
<Button
  type='file'
  onClick={e => {
    this.refs['file-upload'].click()
  }}
>
  File Upload Material
</Button>

Я использую нечто подобное в одном из своих проектов и просто скрываю элемент <input type='file' />.

...