javascript - 在输入时提交表单

Question

我在按 Enter 和单击按钮时提交搜索表单时遇到问题。点击工作正常。文本被清除，/search 页面呈现并显示搜索索引。当我按 Enter 时，搜索文本会清除，但没有其他内容。我添加了一个函数handleSubmit，但它不起作用。如何让它在输入时搜索？

   handleSubmit(e) {   
        e.preventDefault(e);
        document.getElementById("search-input")
        .addEventListener("keydown", function (event) {
            // event.persist();
            if (event.keyCode === 13) {
                document.getElementById("search-button").click();
            }
        });
        this.setState( {
            searchItem: "",
        })
    };

    render() {

        return (
            <div id="search-form">
                <form>
                    <input
                        type="text"
                        id="search-input"
                        placeholder="Search videos"
                        value={this.state.searchItem}
                        onChange={this.update()}
                    />
                    <button type="submit" id="search-button" onClick={this.handleSubmit}>
                        <Link to={`/search?search=${this.state.searchItem}`}><img id="search-icon" src="https://image.flaticon.com/icons/svg/49/49116.svg" alt="" /></Link>
                    </button>
                </form>
            </div>
        );
    }

标签： javascripthtmlreact-redux

Answer 1

您的 EventListener 不能在 handleSubmit 函数内。

form.addEventListener('submit', handleSubmit());