fix searchbar submit bug

add name for search input and onSubmit event handler for search form
weui · Jun 14, 2016 · 254c430 · 254c430
1 parent f99b483
commit 254c430
Showing 1 changed file with 15 additions and 2 deletions.
diff --git a/src/components/searchbar/searchbar.js b/src/components/searchbar/searchbar.js
@@ -12,17 +12,21 @@ import Icon from '../icon';
 class SearchBar extends React.Component {
     static propTypes = {
         placeholder: React.PropTypes.string,
+        searchName: React.PropTypes.string,
         onChange: React.PropTypes.func,
         onClear: React.PropTypes.func,
         onCancel: React.PropTypes.func,
+        onSubmit: React.PropTypes.func,
         lang: React.PropTypes.object
     };
 
     static defaultProps = {
         placeholder: '搜索',
+        searchName: 'q',
         onChange: undefined,
         onClear: undefined,
         onCancel: undefined,
+        onSubmit: undefined,
         lang: {
             cancel: '取消'
         }
@@ -50,21 +54,30 @@ class SearchBar extends React.Component {
         if(this.props.onChange) this.props.onChange('',e);
     }
 
+    submitHandle(e) {
+        if (this.props.onSubmit) {
+            e.preventDefault();
+            e.stopPropagation();
+            this.props.onSubmit(this.state.text, e);
+        }
+    }
+
     render() {
-        const {children, placeholder, className, ...others} = this.props;
+        const {children, placeholder, className, searchName, ...others} = this.props;
         const clz = classNames({
             'weui_search_bar': true,
             'weui_search_focusing': this.state.focus
         }, className);
 
         return (
             <div className={clz}>
-                <form className='weui_search_outer'>
+                <form className='weui_search_outer' onSubmit={this.submitHandle.bind(this)}>
                     <div className='weui_search_inner'>
                         <Icon value='search'/>
                         <input
                             ref='searchInput'
                             type='search'
+                            name={searchName}
                             className='weui_search_input'
                             placeholder={placeholder}
                             onFocus={e=>this.setState({focus:true})}