"this" is null in my handler. Am I doing something wrong here?

fails.js

import 'babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';

class FileUploadPage extends React.Component {
	handleSubmit(event) {
		event.preventDefault();
		console.log(this.refs.url.value.trim())
	}

	render() {
		return (
			<div>
				<form onSubmit={this.handleSubmit}>
					<input type="text" ref="url"/>
					<button>Fetch</button>
				</form>
			</div>
		);
	}
}

ReactDOM.render(<FileUploadPage/>, document.getElementById('root'));

works.js

import 'babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';

var FileUploadPage = React.createClass({
	handleSubmit: function(event) {
		event.preventDefault();
		console.log(this.refs.url.value.trim());
	},
	render: function() {
		return (
			<div>
				<form onSubmit={this.handleSubmit}>
					<input type="text" ref="url"/>
					<button>Fetch</button>
				</form>
			</div>
		);
	}
})

ReactDOM.render(<FileUploadPage/>, document.getElementById('root'));