Javascript 在React中的一个字符后，输入失去焦点

输入一个字符后会失去焦点，每个组件中的每个输入都会出现这种情况，我在React输入上观看了一些视频，但没有一个视频对我正常工作。我尝试过使用键并在单独的组件中呈现输入，但似乎没有任何效果

输入和文本区域是它发生的地方

import React, { Component } from "react";

import "./bootstrap/css/landing-page.min.css";
import "./vendor/fontawesome-free/css/all.min.css";
import "./vendor/bootstrap/css/bootstrap.min.css";
import "./vendor/simple-line-icons/css/simple-line-icons.css";

import "./App.css";
import "./Group.css";

import store from "./store";
import Home from "./App";

import { Provider } from "react-redux";
import { connect } from "react-redux";
import {
  addBug,
  updateGroupID,
  getBugs,
  createAccount,
  deleteBug
} from "./actions/itemAction";

import { Container } from "reactstrap";

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import { Link } from "react-router-dom";
import Select from "react-select";

class Group extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
      modalBug: []
    };
  }

  showModal = bug => {
    this.setState({ modalBug: bug });
    this.setState({ show: true });
  };

  hideModal = () => {
    this.setState({ show: false });
  };

  setBugTitle = e => {
    this.setState({ BugTitle: e.target.value });
    console.log(this.state.BugTitle);
  };
  setBugDescription = e => {
    this.setState({ BugDescription: e.target.value });
    console.log(this.state.BugDescription);
  };



  render() {

      if (
        this.props.user.loggedIn === true &&
        this.props.user.user.GroupID !== "NOGROUP"
      ) {
        return (
          <Provider store={store}>
            <div className="App">
              <link
                href="https://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic"
                rel="stylesheet"
                type="text/css"
              />

              <nav className="navbar navbar-light bg-light static-top">
                <div className="container">
                  <Link to="/">
                    <div className="navbar-brand">Bug Buster</div>
                  </Link>
                  <button className="btn btn-primary" onClick={this.authCheck}>
                    Log out
                  </button>
                </div>
              </nav>
              <div className="flex-container">
                <div className="bugSubmission">
                  <ul id="newBug">
                    <h3>Submit New Bug</h3>
                    <li>
                      //Input for Bug Title
                      <input
                        type="text"
                        placeholder="Enter Title..."
                        onChange={this.setBugTitle}
                        value={this.state.BugTitle}
                      ></input>
                    </li>
                    <li>
                      //Input for Bug Description
                      <textarea
                        placeholder="Enter Description..."
                        onChange={this.setBugDescription}
                        value={this.state.BugDescription}
                      ></textarea>
                    </li>
                    <li>
                      <button
                        className="btn btn-primary"
                        onClick={() => {
                          const newBug = {
                            Title: this.state.BugTitle,
                            Description: this.state.BugDescription,
                            PosterName:
                              this.props.user.user.FirstName +
                              " " +
                              this.props.user.user.LastName,
                            PosterID: this.props.user.user.UserId,
                            GroupID: this.props.user.user.GroupID
                          };

                          this.props.addBug(newBug);
                        }}
                      >
                        Submit Bug
                      </button>
                    </li>
                  </ul>
                </div>
                <Modal
                  show={this.state.show}
                  handleClose={this.hideModal}
                  bug={this.state.modalBug}
                ></Modal>

              </div>
            </div>



            <script src="vendor/jquery/jquery.min.js"></script>
            <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
          </Provider>
        );
      } else {
        return <h2>No user logged in</h2>;
      }
    };

    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/group" exact component={Group} />
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}

const mapStateToProps = state => ({
  user: state.user,
  item: state.user,
  bugs: state.bugs
});

export default connect(mapStateToProps, {
  createAccount,
  updateGroupID,
  addBug,
  getBugs,
  deleteBug
})(Group);

import React，{Component}来自“React”；
导入“/bootstrap/css/landing page.min.css”；
导入“/vendor/free/css/all.min.css”；
导入“/vendor/bootstrap/css/bootstrap.min.css”；
导入“/vendor/simple line icons/css/simple line icons.css”；
导入“/App.css”；
导入“/Group.css”；
从“/store”导入存储；
从“/App”导入主页；
从“react redux”导入{Provider}；
从“react redux”导入{connect}；
进口{
addBug，
updateGroupID，
getBugs，
创建帐户，
删除虫
}来自“/actions/itemAction”；
从“reactstrap”导入{Container}；
进口{
BrowserRouter作为路由器，
转换
路线,，
重新使用
}从“反应路由器dom”；
从“react router dom”导入{Link}；
从“反应选择”导入选择；
类组扩展组件{
建造师（道具）{
超级（道具）；
此.state={
秀:假,，
modalBug:[]
};
}
showModal=bug=>{
this.setState（{modalBug:bug}）；
this.setState（{show:true}）；
};
hideModal=（）=>{
this.setState（{show:false}）；
};
setBugTitle=e=>{
this.setState（{BugTitle:e.target.value}）；
log（this.state.BugTitle）；
};
setBugDescription=e=>{
this.setState（{BugDescription:e.target.value}）；
log（this.state.BugDescription）；
};
render（）{
如果(
this.props.user.loggedIn==true&&
this.props.user.user.GroupID！=“NOGROUP”
) {
返回(
除虫器
注销

提交新Bug

//输入错误标题


//错误描述的输入


{
常数newBug={
标题：this.state.BugTitle，
描述：this.state.BugDescription，
PosterName：
this.props.user.user.FirstName+
" " +
this.props.user.user.LastName，
PosterID:this.props.user.user.UserId，
GroupID:this.props.user.user.GroupID
};
this.props.addBug（newBug）；
}}
>
提交错误


);
}否则{
返回没有用户登录；
}
};
返回(
);
}
}
常量mapStateToProps=状态=>({
用户：state.user，
项目：state.user，
bug:state.bug
});
导出默认连接（MapStateTops{
创建帐户，
updateGroupID，
addBug，
getBugs，
删除虫
})（组）；

我认为您必须在状态中初始化BugTitle

构造函数（道具）{
超级（道具）；
此.state={
秀:假,，
modalBug:[]，
标题：“
};
}

要调用setBugTitle函数，您可以这样做

this.setBugTitle（e）}
值={this.state.BugTitle}
/>

---

我希望这对您有所帮助

您不需要绑定

setBugTitle

和

setBugDescription

。它们是用箭头函数编写的。只需编写

onChange={this.setBugDescription}

，它不会改变任何东西