2017-09-01 8 views
0

入力変更時に "google-like-search-input"ページを作成しようとしましたが、結果ページに切り替えてすべての検索結果を表示します。reactjs onChange switchRouteを入力して最初の文字を失いました

私はいずれかのキーを押すと結果ページ(#/結果)にジャンプし、最初に入力した文字が失われましたか?

誰もがヒントを持っていますが、これをどのように修正できますか?

class Home extends React.Component { 
    constructor(props, context) { 
    super(props, context); 
    this.state = { 
     query: '' 
    }; 
    this.updateInputValue = this.updateInputValue.bind(this); 
    } 
    updateInputValue(event) { 
    this.setState({query: event.target.value}); 
    console.log('event ' + event.target.value); 
    this.props.history.push('/search'); 
    // history.push('/search') 
    // this.context.router.push('/'); 
    } 

  render() { 
    var query = this.state.query; 
    return (
     <article> 
     <SearchForm query={query} onChange={this.updateInputValue} /> 
     </article> 
    ) 
  } 
} 

あなたはthis.props.history.push('/search');ホームコンポーネントのアンマウントを行うと、あなたが状態を失うときので、ご協力いただきありがとうござい

答えて

0

は、これはおそらくです。あなたはreduxのような外部状態にqueryを格納する必要があります。また、React-Router 4を使用する場合は、location state.

関連する問題