React Dropzone : 드래그 앤 드롭시 스타일 변경

Question

나는 중학교 개발자이고 반응이 새로운 것입니다 그래서 dropzone-react를 사용하고 드래그 할 때 스타일을 변경하는 방법을 검색합니다. 영역에있는 파일? Dropzone은 기본 스타일로 반응하지만, 어떻게 변경할 수 있습니까? 예가 있습니까? 감사합니다.

Answer 1

당신이 DROPZONE에서 파일을 드래그 할 때 다른 스타일을 적용 할 activeClassName 및 클래스 이름 속성을 사용할 수 있습니다에 refrence

const { Component } = React 
const { render } = ReactDOM 
const Dropzone = reactDropzone 


const handleDropRejected = (...args) => console.log('reject', args) 

class ImageUpload extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { preview: null } 
    this.handleDrop = this.handleDrop.bind(this) 
    } 

    handleDrop([{ preview }]) { 
    this.setState({ preview }) 
    } 

    render() { 
    const { preview } = this.state 

    const dropzoneStyle = { 
    width : "20%", 
    height : "150px", 
    border : "1px solid black" 
}; 
const dropzoneStyleActive = { 
    width : "20%", 
    height : "150px", 
    border : "5px solid green" 
}; 

    return ( 
     <section> 
     <Dropzone 
      //onDrop={ this.handleDrop } 
      style={dropzoneStyle} 
      activeStyle={dropzoneStyleActive} 
      accept="image/jpeg,image/jpg,image/tiff,image/gif" multiple={ false } onDropRejected={ handleDropRejected }> 
      Drag a file here or click to upload. 
     </Dropzone> 
     { preview && 
     <img src={ preview } alt="image preview" /> 
     } 
     </section> 
    ) 
    } 
} 

render(<ImageUpload />, document.getElementById('main')) 

에 대한 부여 됨으로써.