search components

src/components/ui/search.js

@@ -1,29 +1,50 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import styles from './search.less'
 import { Input, Select, Button, Icon } from 'antd'
 
 class Search extends React.Component {
   state = {
-    clearVisible: false
+    clearVisible: false,
+    selectValue: this.props.selectProps.defaultValue || ''
   }
   handleSearch = () => {
-    // console.log(this.refs.searchInput)
+    const data = {
+      keyword: ReactDOM.findDOMNode(this.refs.searchInput).value
+    }
+    if (this.props.select) {
+      data.field = this.state.selectValue
+    }
+    this.props.onSearch(data)
   }
-  handleInputChange = (e) => {
-    console.log(e.target.value)
+  handleInputChange = e => {
+    this.setState({
+      ...this.state,
+      clearVisible: e.target.value !== ''
+    })
+  }
+  handeleSelectChange = value => {
+    this.setState({
+      ...this.state,
+      selectValue: value
+    })
   }
   handleClearInput = () => {
-
+    ReactDOM.findDOMNode(this.refs.searchInput).value = ''
+    this.setState({
+      clearVisible: false
+    })
+    this.handleSearch()
   }
   render () {
-    const {size, select, selectOptions, selectProps, onSearch} = this.props
+    const {size, select, selectOptions, selectProps} = this.props
     const {clearVisible} = this.state
     return (
       <Input.Group compact size={size} className={styles.search} >
-        {select && <Select size={size} {...selectProps}>
+        {select && <Select ref='searchSelect' onChange={this.handeleSelectChange} size={size} {...selectProps}>
           {selectOptions.map((item, key) => <Select.Option value={item.value} key={key}>{item.name || item.value}</Select.Option>)}
         </Select>}
-        <Input size={size} onChange={this.handleInputChange} />
+        <Input ref='searchInput' size={size} onChange={this.handleInputChange} />
         <Button size={size} type='primary' onClick={this.handleSearch}>搜索</Button>
         {clearVisible && <Icon type='cross' onClick={this.handleClearInput} />}
       </Input.Group>

src/components/users/search.js

@@ -1,6 +1,5 @@
 import React, { PropTypes } from 'react'
-import { Form, Input, Button, Select, Row, Col } from 'antd'
-import styles from './search.less'
+import { Form, Button, Row, Col } from 'antd'
 import SearchGroup from '../ui/search'
 
 const search = ({
@@ -14,39 +13,29 @@ const search = ({
     getFieldsValue
   }
 }) => {
-  // function handleSubmit (e) {
-  //   e.preventDefault()
-  //   validateFields((errors) => {
-  //     if (errors) {
-  //       return
-  //     }
-  //     onSearch(getFieldsValue())
-  //   })
-  // }
-
-  const searchGroupProps ={
+  const searchGroupProps = {
     field,
     keyword,
-    size:'large',
-    select:true,
-    selectOptions:[{value:'姓名'},{value:'地址'}],
-    selectProps:{
-      defaultValue:"姓名"
+    size: 'large',
+    select: true,
+    selectOptions: [{ value: 'name', name: '姓名' }, { value: 'address', name: '地址' }],
+    selectProps: {
+      defaultValue: 'name'
     },
-    onSearch:(res) => {
-      console.log(res)
+    onSearch: (value) => {
+      onSearch(value)
     }
   }
 
   return (
-      <Row gutter={24}>
-        <Col lg={8} md={12} sm={16} xs={24} style={{marginBottom:16}}>
-          <SearchGroup {...searchGroupProps} />
-        </Col>
-        <Col lg={{offset:8,span:8}} md={12} sm={8} xs={24} style={{marginBottom:16,textAlign:'right'}}>
-          <Button size='large' type='ghost' onClick={onAdd}>添加</Button>
-        </Col>
-      </Row>
+    <Row gutter={24}>
+      <Col lg={8} md={12} sm={16} xs={24} style={{marginBottom: 16}}>
+        <SearchGroup {...searchGroupProps} />
+      </Col>
+      <Col lg={{offset: 8, span: 8}} md={12} sm={8} xs={24} style={{marginBottom: 16, textAlign: 'right'}}>
+        <Button size='large' type='ghost' onClick={onAdd}>添加</Button>
+      </Col>
+    </Row>
   )
 }