forgeplus-react/src/exchange/ExchangeRightSearch.js

import React, { Component } from 'react';
import { Input } from 'antd'
import { Link } from 'react-router-dom'

const Search = Input.Search;
class ExchangeRightSearch extends Component {
  constructor(props) {
    super(props)
    this.state={
      searchDefault:true
    }
  }

  // 有关搜索部分
  activeSearch =(e)=>{
    this.props.searchEvent(e);
    if(!e){
      this.setState({
        searchDefault:true
      })
    }
  }
  showSearchPanel = () =>{
    this.setState({
      searchDefault:false
    })
  }

  
  render(){
    let { searchDefault } = this.state;
    const { current_user } = this.props;

    const sendBtn =()=> {
      if(current_user){
        return(<Link to={'/forums/new'} className="send_btn">发布话题</Link>)
      }else{
        return(<a href="/login" className="send_btn">发布话题</a>)
      }
    }
    return(
      <div className="top_Operate">
        {sendBtn()}
        {
          searchDefault ? 
          <Search
            className="searchfrom"
            placeholder="请输入您想搜索的内容"
            size="large"
            onSearch={this.showSearchPanel}
          />
          :
          <Search
            className="searchfrom active"
            placeholder="请输入您想搜索的内容"
            size="large"
            onSearch={this.activeSearch}
          />
        }
      </div>
    )
  }
}
export default ExchangeRightSearch;