React Dropzone：ドラッグアンドドロップするときのスタイルを変更

Question

私はジュニア開発者であり、反応は新しいです だから私はdropzone-reactを使用し、ドラッグするときにスタイルを変更する方法を検索しますゾーンのファイルですか？ Dropzoneはその目的のために基本的なスタイルを反応させますが、私はこれをどのように変更できますか？ 例がありますか？ ありがとうございました！

Answer 1

あなたがドロップゾーンにファイルをドラッグするときに別のスタイルを適用するactiveClassNameとclassNameのプロパティを使用することができます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')) 

ためexmple。