我在react组件的render语句中有一个简单的输入框,看起来像这样:

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


使用this.handleSubmit函数,我想将<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)
}

最佳答案

重定向:只需调用location.href = newUrlString

但是,表单提交似乎优先,因此您需要防止默认行为。

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


从React中的表单获取值:

这里没有必要仅使用jQuery在React组件中获取表单值。.如果我们需要,那为什么还要使用React?在页面加载后,使用ref回调函数存储节点,并将该值传递给您的提交处理程序。

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

关于javascript - react/jquery:使用内置查询字符串重定向到另一个URL,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37793523/

10-16 14:16
查看更多