反应：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 (将#修改为@）