Avoid adding click event properties to formData

Setting onClick to onNextStep directly caused click event data to be passed in handleAdvanceStep, which then merged it with the formData state in student registration. This caused issues.

src/components/registration/steps.jsx

@@ -1332,45 +1332,58 @@ const IntlTeacherApprovalStep = injectIntl(TeacherApprovalStep);
 /*
  * CLASS INVITE NEW STUDENT STEP
  */
-const ClassInviteNewStudentStep = props => (
+class ClassInviteNewStudentStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleNextStep'
+        ]);
+    }
+    handleNextStep () {
+        return this.props.onNextStep();
+    }
+    render () {
+        return (
             <Slide className="registration-step class-invite-step">
-        {props.waiting ? [
+                {this.props.waiting ? [
                     <Spinner key="spinner" />
                 ] : [
                     <Avatar
                         className="invite-avatar"
                         key="avatar"
-                src={props.classroom.educator.profile.images['50x50']}
+                        src={this.props.classroom.educator.profile.images['50x50']}
                     />,
-            <h2 key="username">{props.classroom.educator.username}</h2>,
+                    <h2 key="username">{this.props.classroom.educator.username}</h2>,
                     <p
                         className="description"
                         key="description"
                     >
-                {props.intl.formatMessage({id: 'registration.classroomInviteNewStudentStepDescription'})}
+                        {this.props.intl.formatMessage({id: 'registration.classroomInviteNewStudentStepDescription'})}
                     </p>,
                     <Card key="card">
                         <div className="contents">
-                    <h3>{props.classroom.title}</h3>
+                            <h3>{this.props.classroom.title}</h3>
                             <img
                                 className="class-image"
-                        src={props.classroom.images['250x150']}
+                                src={this.props.classroom.images['250x150']}
                             />
                         </div>
                         <NextStepButton
-                    text={props.intl.formatMessage({id: 'general.getStarted'})}
-                    waiting={props.waiting}
-                    onClick={props.onNextStep}
+                            text={this.props.intl.formatMessage({id: 'general.getStarted'})}
+                            waiting={this.props.waiting}
+                            onClick={this.handleNextStep}
                         />
                     </Card>,
                     <StepNavigation
-                active={props.activeStep}
+                        active={this.props.activeStep}
                         key="step"
-                steps={props.totalSteps - 1}
+                        steps={this.props.totalSteps - 1}
                     />
                 ]}
             </Slide>
-);
+        );
+    }
+}
 
 ClassInviteNewStudentStep.propTypes = {
     activeStep: PropTypes.number,
@@ -1398,47 +1411,62 @@ const IntlClassInviteNewStudentStep = injectIntl(ClassInviteNewStudentStep);
 /*
  * CLASS INVITE EXISTING STUDENT STEP
  */
-const ClassInviteExistingStudentStep = props => (
+class ClassInviteExistingStudentStep extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleNextStep'
+        ]);
+    }
+    handleNextStep () {
+        return this.props.onNextStep();
+    }
+    render () {
+        return (
             <Slide className="registration-step class-invite-step">
-        {props.waiting ? [
+                {this.props.waiting ? [
                     <Spinner key="spinner" />
                 ] : [
-            <h2 key="username">{props.studentUsername}</h2>,
+                    <h2 key="username">{this.props.studentUsername}</h2>,
                     <p
                         className="description"
                         key="description"
                     >
-                {props.intl.formatMessage({id: 'registration.classroomInviteExistingStudentStepDescription'})}
+                        {this.props.intl.formatMessage({
+                            id: 'registration.classroomInviteExistingStudentStepDescription'
+                        })}
                     </p>,
                     <Card key="card">
                         <div className="contents">
-                    <h3>{props.classroom.title}</h3>
+                            <h3>{this.props.classroom.title}</h3>
                             <img
                                 className="class-image"
-                        src={props.classroom.images['250x150']}
+                                src={this.props.classroom.images['250x150']}
                             />
-                    <p>{props.intl.formatMessage({id: 'registration.invitedBy'})}</p>
-                    <p><strong>{props.classroom.educator.username}</strong></p>
+                            <p>{this.props.intl.formatMessage({id: 'registration.invitedBy'})}</p>
+                            <p><strong>{this.props.classroom.educator.username}</strong></p>
                         </div>
                         <NextStepButton
-                    text={props.intl.formatMessage({id: 'general.getStarted'})}
-                    waiting={props.waiting}
-                    onClick={props.onNextStep}
+                            text={this.props.intl.formatMessage({id: 'general.getStarted'})}
+                            waiting={this.props.waiting}
+                            onClick={this.handleNextStep}
                         />
                     </Card>,
                     <p key="logout">
-                <a onClick={props.onHandleLogOut}>
-                    {props.intl.formatMessage({id: 'registration.notYou'})}
+                        <a onClick={this.props.onHandleLogOut}>
+                            {this.props.intl.formatMessage({id: 'registration.notYou'})}
                         </a>
                     </p>,
                     <StepNavigation
-                active={props.activeStep}
+                        active={this.props.activeStep}
                         key="step"
-                steps={props.totalSteps - 1}
+                        steps={this.props.totalSteps - 1}
                     />
                 ]}
             </Slide>
-);
+        );
+    }
+}
 
 ClassInviteExistingStudentStep.propTypes = {
     activeStep: PropTypes.number,