时间戳

首页 > 解决方案 > 从 REACT.js 中的 URL 获取查询字符串时如何自动提交表单

reactjs - 从 REACT.js 中的 URL 获取查询字符串时如何自动提交表单

问题描述

我有一个表单，我想在用户登陆页面时自动提交，如果以下字符串在他们收到的 URL 超链接中：?stxt=any+search+term

现在我能够填充查询的状态和输入的值，但我无法触发表单提交。

if (window.location.href.indexOf("?stxt=") > -1) {
        var directories = window.location.href.split('/');
        this.queryUrl = directories[directories.length-1].replace('?stxt=', '').replace('%20', ' ');
}

if(this.queryUrl === undefined) {
    this.setState({
        query: ""
    })
} else {
    this.setState({
        query: queryUrl
    })
}

这是表格：

<form id="form" onSubmit= { this.handleOnSubmit } className="src__input-container">
     <div className="src__total-search">
          <div className="search-container">
             <i class="fa fa-search"></i>
             <input
                className="src__search"
                type="text"
                value={query}
                name="search_filter"
                id="search-input"
                placeholder="&nbsp;&nbsp;Search..."
                onChange ={ this.handleOnInputChange }
                onClick = {this.handleSearchClick}
                onKeyDown = {this.handleOnKeyDown}
                autoComplete="off"/>
          </div>
       </div>
       <div className="src__go-btn-container">
            <input className="go-btn" type="submit" value="GO" />
       </div>
</form>

React.js 中是否有内置函数或我应该触发提交的生命周期。我试过了，componentDidMount();但这对我不起作用。

标签： reactjsforms

解决方案

嘿，您可以提交表单，但使用document.getElementById("myForm")或使用 React选择表单的 dom，ref然后像这样调用document.getElementById("myForm").submit()它的提交方法，唯一棘手的部分是调用它的时候。如果您想在 setState 之后立即执行此操作，queryUrl则 setState 接受回调作为第二个参数，该参数将在设置状态后调用。所以这将起作用：

    this.setState({
        query: queryUrl
    }, () => {
       document.getElementById("myForm").submit()
    })

推荐阅读