javascript - React 组件仅在新搜索时显示？

Question

我有这个组件，我只想在新搜索时显示它。

 class App extends Component {

  constructor(props){
    super(props);
    this.state = { 
      isHidden: true
    }


    this.handleSearch = this.handleSearch.bind(this);   
  }
 
 handleSearch(){
    this.setState({
      isHidden: !this.state.isHidden
    })
  }
  
  // different file
  
    render(){
    return(
      <div className="search-input">
        <InputGroup>
          <Input placeholder='Enter Search' 
            onChange={this.props.handleChange}
            value={this.props.value} />
          <InputGroupAddon className='input-group-append'
            onClick={this.props.handleSearch}>
            <span className='input-group-text'>
              <i className="fa fa-search fa-lg fa-flip-horizontal"></i>
            </span>
          </InputGroupAddon>
        </InputGroup>    
      </div>
    )
  }
  
 //different file
 
 export default props => (
  <section className="my-3">
    {!props.isHidden ? 
      <SearchResultBar 
      value={props.value} /> : null }
  </section>
)

但是现在发生的情况是，当我单击 InputGroupAddon 时，该组件正在切换，我尝试了一些方法，但没有成功。如何确保此容器仅在进行新搜索时显示的正确方法？而不是当我单击提交按钮时进行切换？是因为我没有使用某种形式吗？

Answer 1

您必须使用实例方法而不是作为 prop 传递的函数。像这样的事情，

<InputGroupAddon className='input-group-append'
   onClick={this.handleSearch}>
   <span className='input-group-text'>
      <i className="fa fa-search fa-lg fa-flip-horizontal"></i>
   </span>
</InputGroupAddon>