apollo+react实战项目 stepbystep（七）

搜索链接列表

1、创建搜索组件

class Search extends React.Component{
  state={
    value:'',
  }

  render(){
    const {value} = this.state
    return(
      <div>
        <input
          type='text'
          value={value}
          placeholder='search text'
          onChange={e=>this.setState({value:e.target.value})}
        />
       <links ...>

      </div>
    );
  }
}

　　2、根据输入的值搜索，使用Query组件

a、创建搜索query

const SEARCH_LINKS=gql`
  query searchLinks($filter:String!){
    feed(filter:$filter){
      links{
        id
        description
        url
        createdAt
        postedBy{
          id
          name
        }
        votes{
          id
          user{
            id
          }
        }
      }
    }
  }
`

　　b、展示搜索结果

      <Query query={SEARCH_LINKS} variables={{filter:value}}>
          {
            (({data})=>(
              <div>
                {value && data.feed.links.map((link,index)=><Link key={link.id} index={index} link={link}/>)}
            </div>))
          }
      </Query>

　　这样将没输入一个字母都将更新搜索结果。如果没有输入的话则不显示。

3、将Search组件添加到header和路由中

Header.js

<div className="flex flex-fixed black">
  <div className="fw7 mr1">Hacker News</div>
  <Link to="/" className="ml1 no-underline black">
    new
  </Link>
  <div className="ml1">|</div>
  <Link to="/search" className="ml1 no-underline black">
    search
  </Link>
  {authToken && (
    <div className="flex">
      <div className="ml1">|</div>
      <Link to="/create" className="ml1 no-underline black">
        submit
      </Link>
    </div>
  )}
</div>

　　

App.js

import React, { Component } from 'react';
import {Route,Switch} from 'react-router-dom';
import Header from './Header';
import '../styles/App.css';
import LinkList from './LinkList';
import CreateLink from './CreateLink';
import Login from './Login';
import Search from './Search'

class App extends Component {
  render() {
    return (
      <div className="center w85">
        <Header />
        <div className="ph3 pv1 background-gray">
          <Switch>
            <Route exact path='/' component={LinkList} />
            <Route path='/create' component={CreateLink} />
            <Route path='/login' component={Login} />
            <Route path='/search' component={Search} />
          </Switch>
        </div>
      </div>
    );
  }
}

export default App;