我在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/