Question

我在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)
}

Answer 1

重定向：就像调用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>

react / jquery：使用内置查询字符串重定向到另一个URL

1 个答案: