Question

我是初级开发人员，对我来说反应是新的所以我使用dropzone-react，我搜索如何在区域中拖动文件时更改样式？ Dropzone的反应目的是一种基本风格，但我找不到如何改变它？你有一个例子吗？谢谢！

Answer 1

参考的例子

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'))

在dropzone中拖动文件时，可以使用activeClassName和className属性应用不同的样式。

React Dropzone：在拖放时改变样式

1 个答案: