Skip to content

Instantly share code, notes, and snippets.

@ivanoats
Last active August 29, 2015 14:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ivanoats/4692ad48ab89069f509e to your computer and use it in GitHub Desktop.
Save ivanoats/4692ad48ab89069f509e to your computer and use it in GitHub Desktop.
React 0.13 allows you to use ES6 classes. Feels so funny to be writing `super` in JavaScript, but it's really a nice and clean componnent.
import React from 'react/addons';
import { DonorCard } from './donorCard.js';
export class DropZone extends React.Component {
constructor(props) {
super(props);
this.state = {
draggedOver: false
}
}
render() {
let classList = 'drop-zone ' + (this.state.draggedOver ? 'dragged-over' : '');
return (
<section
className={classList}
id={this.props.id}
// http://facebook.github.io/react/blog/#autobinding
onDragOver={this.handleDragOver.bind(this)}
onDragLeave={this.handleDragLeave.bind(this)}
>
<p>Drop Zone</p>
<DonorCard draggable="true" header="Ivan Storck" body="One Million DOLLARS!!!" />
</section>
);
}
handleDragOver(ev) {
ev.preventDefault();
this.setState({draggedOver: true})
}
handleDragLeave(ev) {
this.setState({draggedOver: false})
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment