Material-ui: [FlatButton] 버튼으로 파일 입력이 작동하지 않습니다.

버전 0.7.5.

@nschaubeck 문서 사이트의 버튼이 작동합니까?

@hai-cea 네 그렇습니다. 버튼 요소가 자식을 렌더링하지 않는 것처럼 DOM에 <input> 요소도 없는 것 같았습니다.

저도 이 문제가 있습니다. @nschaubeck 해결책을 찾은 적이 있습니까?

@e-monson 실제로 솔루션을 찾을 수 없었습니다.

이것은 작동합니다!
하자 스타일 = {
예시이미지입력: {
커서: '포인터',
위치: '절대',
상단: '0',
하단: '0',
오른쪽: '0',
왼쪽: '0',
너비: '100%',
불투명도: '0'
}
}

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

@nikhildaga 버튼에 입력 필드를 배치하는 것이 W3C 사양의 일부가 아니기 때문에 Chrome에서만 작동합니다.

다른 솔루션은 버튼이 숨겨진 입력 필드의 클릭 이벤트를 발생시키도록 하는 것입니다.

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}/>
  );
}

이 문제가 여전히 올바르게 수정되지 않은 것으로 나타났습니다...
문서에서 제안한 솔루션은 @Wofiel이 말한 대로 Chrome에서만 작동합니다. (베타 15-0.2에서도 여전히 그렇습니다)

htmlFor 을 <FlatButton> (또는 <RaisedButton> )로 설정하고 Id를 입력 파일로 설정하면 그게 다지 않을까요? 수동으로 클릭을 트리거할 필요가 없습니다...
레이블에 버튼을 래핑하려고 시도했지만 불행히도 작동하지 않습니다.

지금은 @Wofiel 이 최고의 솔루션인 것 같습니다.

기본 솔루션이 없을 때 이것을 닫는 이유

안녕하세요 @Wofiel 상태 비저장 구성 요소에서 참조없이이 기술을 사용하는 방법을 제안합니까?

@excalliburbd id와 Jquery를 사용할 수 있습니다. 작동해야 합니다.

@Birssan dom 조작 반응? 괜찮아?

평소에는 추천하지 않겠지만, 이 경우에는 괜찮을 클릭 이벤트를 트리거하는 것이라고 생각합니다

@Wofiel As는 버전 15 반응으로 수행할 수 있습니까?

@Wofiel 이 솔루션 console.log(e.target.value) 1개 수신
C:\fakepath\imagefilename.png
최고의 솔루션은
e.target.files[0]

다른 사람이 이 문제에 직면하면 RaisedButton 에 containerElement 를 설정하여 입력 요소를 자식으로 갖는 데 더 적합한 것으로 설정할 수 있습니다. 예를 들어 레이블 ;-)

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

@Thomas101 감사합니다! 방금 이 문제가 발생했으며 귀하의 솔루션이 작동하는 것 같습니다.
엄청난 :)

@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>