2016-06-13 5 views
0

또 다른 URL로 리디렉션 난에 입력을 렌더링 문 내에서 간단한 입력 상자를 내는 다음과 같다 구성 요소 반응 : 나는 것 this.handleSubmit 기능을 사용은/JQuery와 반응 : 내장 된 쿼리 문자열

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) 
} 
+0

'makeQueryString'과'redirect' 함수는 이미 존재합니까? – azium

+0

@azium 아니요, 올바르게 리디렉션하는 방법을 알고 싶습니다. 내가 믿는 낭떠러지 부분을 만들 수 있습니다. – ApathyBear

+0

'적절하게'란 무엇을 의미합니까? 'location.href = '/ newurl''을 사용해 보셨습니까? – azium

답변

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>