は/ jqueryのを反応させる：構築されたクエリ文字列

Question

で別のURLにリダイレクト私はこのようになりますコンポーネント入力、私の中にレンダリング文の中で、単純な入力ボックスを反応させてきた：this.handleSubmit機能を使用して

render() 
    return(
<form onSubmit={this.handleSubmit}> 
     <input id="searchbox" type="text" /> 
</form> 
); 

を、私は考え<input>のコンテンツを自分のサイトの別のURLエンドポイントにリダイレクトするようにします。具体的に私はそうのように、クエリ文字列の形で内容をwww.mysite.com/confidenceに転送したいと思います：

www.mysite.com/SB=?the%query%string

handleSubmit（）内にリダイレクトするための最良の方法は何ですか？ここに私の擬似コードは次のとおりです。

handleSubmit(){ 
    // contents of search box 
    var val = $('#searchbox').val(); 

    //Create querystring 
    var queryString = makeQueryString(val) 

    //redirect to /confidence endpoint with built querystring 
    redirect('/confidence' + queryString) 
} 

Answer 1

リダイレクト：しかし

を呼び出すのと同じくらい簡単に、フォームの提出は、デフォルトの動作を防止する必要があるので、優先されますように見えます。フォームから値を取得

handSubmit(event) { 
    event.preventDefault() 
    location.href = newUrlString 
} 

はに反応：

私たちは、その後の使用は全く反応だからこそ、必要に応じて..リアクトコンポーネントにフォームの値を取得するにはちょうどここにjQueryを使用する必要はありませんか？ refコールバック関数を使用して、ページがロードされた後にノードを格納し、その値を送信ハンドラに渡します。

<form onSubmit={event => this.handleSubmit(event, this.inputNode.value)}> 
    <input ref={node => this.inputNode = node} type="text" /> 
</form>