Javascript 如何将表单提交样式更改为单击和输入

我在导航栏里面建了一个搜索栏。按钮是搜索栏内的放大镜。我使用CSS将其移动到输入字段中。如果点击按钮，一切正常。文本被清除，显示/搜索页面呈现和搜索索引。当我按enter键时，搜索文本将被清除，但没有其他内容。我添加了两个函数searchKeyPress（e）和handleSearch（），它们都不起作用。如何在回车时进行搜索

import React from "react";
import { Link } from 'react-router-dom';


class SearchBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchItem: "",
        };
        this.update = this.update.bind(this);
        this.handleSearch = this.handleSearch.bind(this);
    }

    update() {
        return e => this.setState({ searchItem: e.currentTarget.value });
    }

    searchKeyPress(e) {
        e = e || window.event;
        if (e.keyCode == 13) {
            document.getElementById('search-button').click();
            return false;
        }
        return true;
    }

    handleSearch() {   
        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 //onKeyDown={this.searchKeyPress}
                        type="text"
                        id="search-input"
                        placeholder="Search videos"
                        value={this.state.searchItem}
                        onChange={this.update()}
                    />
                    <button type="submit" id="search-button" onClick={this.handleSearch}>
                        <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>
        );
    }
}

export default SearchBar;

从“React”导入React；
从'react router dom'导入{Link}；
类SearchBar扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索项：“”，
};
this.update=this.update.bind（this）；
this.handleSearch=this.handleSearch.bind（this）；
}
更新（）{
返回e=>this.setState（{searchItem:e.currentTarget.value}）；
}
搜索按键（e）{
e=e | | window.event；
如果（e.keyCode==13）{
document.getElementById（'search-button'）。单击（）；
返回false；
}
返回true；
}
handleSearch（）{
document.getElementById（“搜索输入”）
.addEventListener（“向下键”，函数（事件）{
//event.persist（）；
如果（event.keyCode===13）{
document.getElementById（“搜索按钮”）。单击（）；
}
});
此.setState（{
搜索项：“”，
})
};
render（）{
返回(
);
}
}
导出默认搜索栏；

---

对于此问题，输入type=“search”解决问题。如果您的输入类型为搜索，则按enter键时将发送查询，并且输入是焦点。

对于此问题，input type=“search”可解决此问题。如果您的输入类型为“搜索”，则按enter键时将发送查询，并且输入是聚焦的。

尝试以下操作：

<form onSubmit={this.handleSubmit}>

handleSubmit = (e) => {
  e.preventDefault();  // Hold the form submit
  // get the updated state here and do what ever you want with that state
}

handleSubmit=（e）=>{
e、 preventDefault（）；//保留表单提交
//在此处获取更新的状态，并对该状态执行任何您想要的操作
}

说明：在输入更改时，您已经在使用

update

方法更新状态中的值。因此，您只需处理表单提交（通过单击enter按钮或鼠标单击submit按钮即可完成），在该方法下，您可以获得更新状态并以自己的方式使用它来进行api调用等。使用该方法，您不需要使用

handleSearch

和

searchKeyPress

方法。

尝试以下方法：

<form onSubmit={this.handleSubmit}>

handleSubmit = (e) => {
  e.preventDefault();  // Hold the form submit
  // get the updated state here and do what ever you want with that state
}

handleSubmit=（e）=>{
e、 preventDefault（）；//保留表单提交
//在此处获取更新的状态，并对该状态执行任何您想要的操作
}

---

说明：在输入更改时，您已经在使用

update

方法更新状态中的值。因此，您只需处理表单提交（通过单击enter按钮或鼠标单击submit按钮完成）在这种方法下，您可以获得更新的状态，并以自己的方式使用它进行api调用等。使用这种方法，您不需要

handleSearch

和

searchKeyPress

方法。

我认为您应该以表单形式执行onSubmit事件，与单击按钮元素时的操作相同。

我认为您应该以表单形式执行onSubmit事件，与单击按钮元素时的操作相同。

能否提供一个示例？能否提供一个示例