如何解决反应:MyNavbar组件中的搜索栏不允许我键入
我遇到一个问题,我无法使搜索栏响应输入按钮以外的任何按键。在那里,因为我无法在搜索栏中输入内容。我尝试使用谷歌搜索解决方案来解决我的问题,但是我很难理解我应该做什么。我看到很多人指的是国家和道具,但我对这些概念的理解还不够,无法知道为什么发生此特定问题。任何帮助将不胜感激。
我开始玩State和props,这反映在我的代码中,但是我真的不知道自己在做什么,因此我不敢进一步。
我的道具价值仅为PropTypes.string.isrequired
import React from 'react';
import './MyNavbar.scss';
import ProductData from '../../../helpers/data/ProductData';
import props from '../../../helpers/propz/ValueShape';
class MyNavbar extends React.Component {
state = {
products: [],inputValue: '',value: props,};
handleChange(e) {
console.log('hi from onChange',e.target.value);
this.setState({ value: e.target.value });
}
handleSubmit(e) {
if (e.key === 'Enter') {
ProductData.getProductByUserInput(e.target.value)
.then((response) => this.setState({ products: response }))
.catch((err) => err);
}
e.preventDefault();
}
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<a className="navbar-brand" href="#">
Freak 'N Comics
</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className="collapse navbar-collapse d-flex justify-content-between navbarContent"
id="navbarContent"
>
<ul className="navbar-nav">
<li className="nav-item">
<h4>
<a href="#">Home</a>
</h4>
</li>
<li className="nav-item">
<h4>
<a href="#">Account</a>
</h4>
</li>
<li className="nav-item">
<h4>
<a href="#">Cart</a>
</h4>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input
className="form-control mr-sm-2"
id="userInput"
type="search"
placeholder="Search"
aria-label="Search"
value={this.props.userInput}
onKeyDown={(e) => this.handleSubmit(e)}
onChange={(evt) => this.handleChange(evt)}
></input>
</form>
</div>
</nav>
);
}
}
export default MyNavbar;
更新的代码
import React from 'react';
import './MyNavbar.scss';
import ProductData from '../../../helpers/data/ProductData';
import props from '../../../helpers/propz/ValueShape';
// pass through the items i've searched into home.js
class MyNavbar extends React.Component {
state = {
products: [],}
handleChange = (e) => {
e.preventDefault();
this.setState({ inputValue: e.target.value });
}
handleSubmit = (e) => {
e.preventDefault();
const { inputValue } = this.state.value.inputValue;
if (e.keyCode === 13) {
ProductData.getProductByUserInput(inputValue)
.then((response) => this.setState({ products: response }))
.catch((err) => (err));
}
}
// componentDidMount() {
// window.addEventListener('keydown',this.handleSubmit);
// window.addEventListener('keydown',this.handleChange);
// }
// componentwillUnmount() {
// window.removeEventListener('keydown',this.handleSubmit);
// window.removeEventListener('keydown',this.handleChange);
// }
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<a className="navbar-brand" href="#">Freak 'N Comics</a>
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse d-flex justify-content-between navbarContent" id="navbarContent">
<ul className="navbar-nav">
<li className="nav-item">
<h4><a href="#">Home</a></h4>
</li>
<li className="nav-item">
<h4><a href="#">Account</a></h4>
</li>
<li className="nav-item">
<h4><a href="#">Cart</a></h4>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input
className="form-control mr-sm-2"
id="userInput"
type="search"
placeholder="Search"
aria-label="Search"
value={ this.state.value.inputValue}
// onKeyDown={() => this.handleSubmit}
onChange={() => { this.handleChange(); this.handleSubmit(); }}>
</input>
</form>
</div>
</nav>
);
}
}
export default MyNavbar;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。