                       <tr key={index}>
                         {
                           if index is 0
-                            <td style={verticalAlign: 'middle'}><FontAwesome name='plus-circle' onClick={@addSearchLine}/></td>
-                          else
-                            <td style={verticalAlign: 'middle'}><FontAwesome name='minus-circle' onClick={@deleteSearchLine.bind(@, index)}/></td>
+                            <td style={verticalAlign: 'middle'}>
+                              <FontAwesome name='plus-circle' onClick={@handleAddSearch}/>
+                            </td>
+                          else
+                            <td style={verticalAlign: 'middle'}>
+                              <FontAwesome name='minus-circle' onClick={@handleDeleteSearchLine.bind(@, index)}/>
+                            </td>
                         }
                         <td>{index+1}</td>
                         <td>
-                          <Input type="select" ref="baseOn#{index}" groupClassName='search-area' value={"#{@state.searchArgv[index].searchBaseOn}"} onChange={@handleSearchChange}>
-                            <option key={CONST.search.rawDataIndex} value={CONST.search.rawDataIndex}>{__ "All Data"}</option>
-                            <option key={CONST.search.filteredDataIndex} value={CONST.search.filteredDataIndex}>{__ "Filtered"}</option>
+                          <Input type="select" ref="baseOn#{index}" groupClassName='search-area' value={"#{@props.searchItems[index].baseOn}"} onChange={@handleSeaBaseSet.bind(@, index)}>
+                            <option key={CONST.search.rawDataIndex} value={CONST.search.rawDataIndex}>
+                              {__ "All Data"}
+                            </option>
+                            <option key={CONST.search.filteredDataIndex} value={CONST.search.filteredDataIndex}>
+                              {__ "Filtered"}
+                            </option>
                             {
                               for i in [1..index]
-                                <option key={CONST.search.indexBase + i} value={CONST.search.indexBase + i}>{__ "Search Result No. %s", i}</option>
+                                <option key={CONST.search.indexBase + i} value={CONST.search.indexBase + i}>
+                                  {__ "Search Result No. %s", i}
+                                </option>
                             }
                           </Input>
                         </td>
                         <td>
                            <Input
                               type='text'
-                              value={@state.searchArgv[index].filterKey}
+                              value={@props.searchItems[index].content}
                               placeholder={__ "Keywords"}
                               ref="search#{index}"
                               groupClassName='search-area'
-                              onChange={@handleSearchChange} />
-                        </td>
-                        <td>{@state.searchArgv[index].res}</td>
-                        <td>{@state.searchArgv[index].total}</td>
-                        <td>{@state.searchArgv[index].percent}</td>
+                              onChange={@onSeaRuleKeySet.bind(@, index)} />
+                        </td>
+                        <td>{@props.searchItems[index].res}</td>
+                        <td>{@props.searchItems[index].total}</td>
+                        <td>{@props.searchItems[index].percent}</td>
                       </tr>
                   }
                   </tbody>

  handleAddSearch: ->
    @props.onSeaRuleAdd()
  handleDeleteSearchLine: (index)->
    @props.onSeaRuleDelete(index)

  handleAddStat: ->
    @props.onStatRuleAdd()
  handleDeleteStat: (index)->
    @props.onStatRuleDelete(index)

  render: ->
    <Grid>

                      <th style={verticalAlign: 'middle'}>
                        <OverlayTrigger trigger='click' rootClose={true} placement='right' overlay={
                          <Popover title={__ "Tips"} id={"regExp-Hint"}>
                            <li>
                              {__ "Support the Javascript's "}
                              <a onClick={openExternal.bind(this, "http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp")}>
                                {"RegExp"}
                              </a>
                            </li>
                          </Popover>
                          }>
                          <FontAwesome name='question-circle'/>
