在 React 中輸入一個字符后失去焦點

Question

輸入一個字符后輸入失去焦點，它在每個組件的每個輸入上，我完全按照 React 輸入觀看了一些視頻，但它們根本不適合我。 我試過使用鍵並在單獨的組件中呈現輸入，但似乎沒有任何效果。

input 和 textarea 是它發生的地方。

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);

Answer 1

我認為您必須在狀態中初始化BugTitle

  constructor(props) {
    super(props);
    this.state = {
      show: false,
      modalBug: [],
      BugTitle: ""
    };
  }

並調用setBugTitle函數，你可以像這樣

        <input
          type="text"
          placeholder="Enter Title..."
          onChange={e => this.setBugTitle(e)}
          value={this.state.BugTitle}
        />

我希望能幫助你