MsgForm submit preventDefault

kenberkeley · kenberkeley · commit 31e0617e3d5c · 2016-08-29T23:36:56.000+08:00
diff --git a/src/components/Msg/MsgForm/index.js b/src/components/Msg/MsgForm/index.js
@@ -79,7 +79,8 @@ export default class MsgForm extends Component {
   }
 
   /* 同样地，提交表单前需要根据当前 mode 进行对应的操作 */
-  handleSubmit () {
+  handleSubmit (evt) {
+    evt.preventDefault()
     let { pathname } = this.props.location
     let opt = isAddMode(pathname) ? 'addMsg' : 'modMsg'
 
diff --git a/src/components/Msg/MsgForm/msg-form.jsx b/src/components/Msg/MsgForm/msg-form.jsx
@@ -9,7 +9,7 @@ import React from 'react'
 // （因为箭头函数没有自己的 this！无法通过 call/apply 改变）
 export default function () {
   return (
-    <form>
+    <form onSubmit={(e) => this.handleSubmit(e)}>
       <div className="form-group">
         <label htmlFor="title">标题</label>
         <input
@@ -45,9 +45,8 @@ export default function () {
         </div>
         <div className="btn-group" role="group">
           <button
-            type="button"
-            className="btn btn-success"
-            onClick={() => this.handleSubmit()}>
+            type="submit"
+            className="btn btn-success">
             提交&nbsp;
             <span className="glyphicon glyphicon-ok"></span>
           </button>

Original file line number	Diff line number	Diff line change
`@@ -79,7 +79,8 @@ export default class MsgForm extends Component {`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`/* 同样地，提交表单前需要根据当前 mode 进行对应的操作 */`
`82`		`- handleSubmit () {`
	`82`	`+ handleSubmit (evt) {`
	`83`	`+ evt.preventDefault()`
`83`	`84`	`let { pathname } = this.props.location`
`84`	`85`	`let opt = isAddMode(pathname) ? 'addMsg' : 'modMsg'`
`85`	`86`