Javascript 为什么event.target.value只捕获字符串输入中的第一个字母

一旦我开始将道具从父母传给孩子，我就遇到了这个问题，

getQuestion

函数只会让我输入第一个字母，而且在输入字段中什么也没有显示

以前，当我的代码只是父子代码时，它是有效的

我想知道到底发生了什么，因为我已经尝试过通过控制台日志进行调试，我所知道的是它只注册第一个字母

这个问题没有帮助，因为我没有把

onChange

拼错

App.js

class App extends Component {
  constructor(props){
    super(props);



    this.getPostId = this.getPostId.bind(this);
    this.getQuestion = this.getQuestion.bind(this);
    this.makePost = this.makePost.bind(this);
    this.getBody = this.getBody.bind(this);
    this.getPostType = this.getPostType.bind(this);
    this.getImgSrc = this.getImgSrc.bind(this);
    this.submitPost = this.submitPost.bind(this);
    this.formOpen = this.formOpen.bind(this);
    this.formClose = this.formClose.bind(this);

    this.back = this.back.bind(this);
    this.showPost = this.showPost.bind(this);
    this.renderPosts = this.renderPosts.bind(this);

    //Answer/Response methods
    this.makeAnswer = this.makeAnswer.bind(this);
    this.getAnswer = this.getAnswer.bind(this);
    this.submitAnswer = this.submitAnswer.bind(this);

    this.state = {
      posts: [],

        answers: [],

      question: '',
      body: '',
      postType: 'Question',
      imgSrc: '',
      form: false,
      openedPost: null,
      answer: '',
      favorited: false,

      //sign up
      email:'',
      password: '',
      user: null

    }

}
getQuestion(event) {
  event.preventDefault();
  this.setState({ question:event.target.value });
}


render() {


    return (

      <Router>
        <div className="container">
          <Route
                  exact path={"/"}
                  component={() => <Home />}
          />

          <Route
                  exact path={"/home"}
                  component={() => <Home />}
          />

          <Route
                exact path={"/signup"}
                component={() => <SignUp />}
          />

          <Route
                exact path={`/dashboard`}
                component={() =>
                  <Dashboard back={this.back}
                    form={this.state.form}
                      openedPost={this.state.openedPost}
                        renderPosts={this.renderPosts}
                          formClose={this.formClose}
                            formOpen={this.formOpen}
                              posts={this.state.posts}
                                getPostId={this.getPostId}
                                  getQuestion={this.getQuestion}
                                    makePost={this.makePost}
                                      getBody={this.getBody}
                                        getPostType={this.getPostType}
                                          getImgSrc={this.getImgSrc}
                                              submitPost={this.submitPost}
                                                test={this.test}
                                                  question={this.state.question}

                />}
              />



                <Route
                      exact path={`/dashboard/post${this.state.openedPost}`}
                      component={() =>
                        <SinglePost posts={this.state.posts}
                                      openedPost={this.state.openedPost}
                                       getAnswer={this.getAnswer}
                                        makeAnswer={this.makeAnswer}
                                          submitAnswer={this.submitAnswer}
                                            showAnswers={this.showAnswers}
                                              renderAnswers={this.renderAnswers}
                                                renderFavorite={this.renderFavorite}
                                                  userFavorited={this.userFavorited}
                                                    back={this.back}

                      />
                    }

                    />






      </div>
    </Router>
    );
  }

import React, { Component } from 'react';
import Navagationbar from  '../../components/Navigation/Navagationbar';
import Header from  '../../components/Header/Header';
import SignUpButton from  '../../components/SignUp/SignUpButton';
import AddPostForm from './AddPostForm';
import './styles.css';

import {
  Link
} from 'react-router-dom'

class Dashboard extends Component {
  render() {


    let renderedPosts = null;



    let createPostButton =  <div className="container" ><button className="button-primary" onClick={this.props.formOpen}> Create Post </button> </div>;

    if(this.props.openedPost) {
      renderedPosts = null;
      createPostButton = null;
    }
    else {
      renderedPosts = this.props.renderPosts();
    }

        let createPostForm = null;
        const openedForm = this.props.form;
        if(openedForm) {
        createPostForm =
              <AddPostForm
                formClose={this.props.formClose}
                    posts={this.props.posts}
                      getPostId={this.props.getPostId}
                        getQuestion={this.props.getQuestion}
                          makePost={this.props.makePost}
                            getBody={this.props.getBody}
                              getPostType={this.props.getPostType}
                                getImgSrc={this.props.getImgSrc}
                                    submitPost={this.props.submitPost}
                                      question={this.props.question}

                                    />

          createPostButton = null;
        }
        console.log("OPENED FORM IS " + openedForm)
    return (
    <div >
      <SignUpButton />
      <Header />
      <button onClick={this.props.test}/>
      {this.props.openedPost ? null : <Navagationbar />}



        {createPostForm}
        <div className="row">
          <div>
            {createPostButton}
          </div>
        </div>

        <div className="row">



        </div>
      <div className="row">
        <div className="twelve columns">
            {renderedPosts}
        </div>
      </div>

    </div>
    );
  }
}


export default Dashboard;

import React, { Component } from 'react';
import './styles.css';

class AddPostForm extends Component {
    render() {
    return(
      <div className="container">



      <div className="row">
            <div className="six columns">
              <label>Post Title</label>
                <input onChange={this.props.getQuestion} value={this.props.question} className="u-full-width" type="search" placeholder="title" id="exampleEmailInput"/>
            </div>

              <div className="six columns">
                <label>Post Type</label>
                  <select value={this.props.type} onChange={this.props.getPostType} className="u-full-width">
                    <option value="Question">Question</option>
                    <option value="Discussion">Discussion</option>

                 </select>
              </div>
        </div>
            <div className="row">
              <div className="twelve columns">
                <label>Post</label>
                  <textarea onChange={this.props.getBody}  className="u-full-width" placeholder="get some clout" id="postMessage"></textarea>
                <label>
                  <span>Image Link</span> <br />
                    <input type="search"  onChange={this.props.getImgSrc}/>
                </label>
                  <input className="button-primary" type="button" value="submit" onClick={this.props.submitPost}/>
                  <button onClick={this.props.formClose}>Cancel </button>
               </div>
            </div>

    </div>

    );
  }
}

export default AddPostForm;

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.getPostId=this.getPostId.bind（this）；
this.getQuestion=this.getQuestion.bind（this）；
this.makePost=this.makePost.bind（this）；
this.getBody=this.getBody.bind（this）；
this.getPostType=this.getPostType.bind（this）；
this.getImgSrc=this.getImgSrc.bind（this）；
this.submitPost=this.submitPost.bind（this）；
this.formOpen=this.formOpen.bind（this）；
this.formClose=this.formClose.bind（this）；
this.back=this.back.bind（this）；
this.showPost=this.showPost.bind（this）；
this.renderPosts=this.renderPosts.bind（this）；
//答复/答复方法
this.makeAnswer=this.makeAnswer.bind（this）；
this.getAnswer=this.getAnswer.bind（this）；
this.submitAnswer=this.submitAnswer.bind（this）；
此.state={
员额：[]，
答复：[]，
问题：''，
正文：“”，
postType:'问题'，
imgSrc:“”，
形式:假,，
openedPost:null，
答复:",，
偏爱：错误，
//报名
电子邮件：“”，
密码：“”，
用户：空
}
}
问题（事件）{
event.preventDefault（）；
this.setState（{问题：event.target.value}）；
}
render（）{
返回(
}
/>
}
/>
}
/>
}
/>
}
/>
);
}

Dashboard.js

class App extends Component {
  constructor(props){
    super(props);



    this.getPostId = this.getPostId.bind(this);
    this.getQuestion = this.getQuestion.bind(this);
    this.makePost = this.makePost.bind(this);
    this.getBody = this.getBody.bind(this);
    this.getPostType = this.getPostType.bind(this);
    this.getImgSrc = this.getImgSrc.bind(this);
    this.submitPost = this.submitPost.bind(this);
    this.formOpen = this.formOpen.bind(this);
    this.formClose = this.formClose.bind(this);

    this.back = this.back.bind(this);
    this.showPost = this.showPost.bind(this);
    this.renderPosts = this.renderPosts.bind(this);

    //Answer/Response methods
    this.makeAnswer = this.makeAnswer.bind(this);
    this.getAnswer = this.getAnswer.bind(this);
    this.submitAnswer = this.submitAnswer.bind(this);

    this.state = {
      posts: [],

        answers: [],

      question: '',
      body: '',
      postType: 'Question',
      imgSrc: '',
      form: false,
      openedPost: null,
      answer: '',
      favorited: false,

      //sign up
      email:'',
      password: '',
      user: null

    }

}
getQuestion(event) {
  event.preventDefault();
  this.setState({ question:event.target.value });
}


render() {


    return (

      <Router>
        <div className="container">
          <Route
                  exact path={"/"}
                  component={() => <Home />}
          />

          <Route
                  exact path={"/home"}
                  component={() => <Home />}
          />

          <Route
                exact path={"/signup"}
                component={() => <SignUp />}
          />

          <Route
                exact path={`/dashboard`}
                component={() =>
                  <Dashboard back={this.back}
                    form={this.state.form}
                      openedPost={this.state.openedPost}
                        renderPosts={this.renderPosts}
                          formClose={this.formClose}
                            formOpen={this.formOpen}
                              posts={this.state.posts}
                                getPostId={this.getPostId}
                                  getQuestion={this.getQuestion}
                                    makePost={this.makePost}
                                      getBody={this.getBody}
                                        getPostType={this.getPostType}
                                          getImgSrc={this.getImgSrc}
                                              submitPost={this.submitPost}
                                                test={this.test}
                                                  question={this.state.question}

                />}
              />



                <Route
                      exact path={`/dashboard/post${this.state.openedPost}`}
                      component={() =>
                        <SinglePost posts={this.state.posts}
                                      openedPost={this.state.openedPost}
                                       getAnswer={this.getAnswer}
                                        makeAnswer={this.makeAnswer}
                                          submitAnswer={this.submitAnswer}
                                            showAnswers={this.showAnswers}
                                              renderAnswers={this.renderAnswers}
                                                renderFavorite={this.renderFavorite}
                                                  userFavorited={this.userFavorited}
                                                    back={this.back}

                      />
                    }

                    />






      </div>
    </Router>
    );
  }

import React, { Component } from 'react';
import Navagationbar from  '../../components/Navigation/Navagationbar';
import Header from  '../../components/Header/Header';
import SignUpButton from  '../../components/SignUp/SignUpButton';
import AddPostForm from './AddPostForm';
import './styles.css';

import {
  Link
} from 'react-router-dom'

class Dashboard extends Component {
  render() {


    let renderedPosts = null;



    let createPostButton =  <div className="container" ><button className="button-primary" onClick={this.props.formOpen}> Create Post </button> </div>;

    if(this.props.openedPost) {
      renderedPosts = null;
      createPostButton = null;
    }
    else {
      renderedPosts = this.props.renderPosts();
    }

        let createPostForm = null;
        const openedForm = this.props.form;
        if(openedForm) {
        createPostForm =
              <AddPostForm
                formClose={this.props.formClose}
                    posts={this.props.posts}
                      getPostId={this.props.getPostId}
                        getQuestion={this.props.getQuestion}
                          makePost={this.props.makePost}
                            getBody={this.props.getBody}
                              getPostType={this.props.getPostType}
                                getImgSrc={this.props.getImgSrc}
                                    submitPost={this.props.submitPost}
                                      question={this.props.question}

                                    />

          createPostButton = null;
        }
        console.log("OPENED FORM IS " + openedForm)
    return (
    <div >
      <SignUpButton />
      <Header />
      <button onClick={this.props.test}/>
      {this.props.openedPost ? null : <Navagationbar />}



        {createPostForm}
        <div className="row">
          <div>
            {createPostButton}
          </div>
        </div>

        <div className="row">



        </div>
      <div className="row">
        <div className="twelve columns">
            {renderedPosts}
        </div>
      </div>

    </div>
    );
  }
}


export default Dashboard;

import React, { Component } from 'react';
import './styles.css';

class AddPostForm extends Component {
    render() {
    return(
      <div className="container">



      <div className="row">
            <div className="six columns">
              <label>Post Title</label>
                <input onChange={this.props.getQuestion} value={this.props.question} className="u-full-width" type="search" placeholder="title" id="exampleEmailInput"/>
            </div>

              <div className="six columns">
                <label>Post Type</label>
                  <select value={this.props.type} onChange={this.props.getPostType} className="u-full-width">
                    <option value="Question">Question</option>
                    <option value="Discussion">Discussion</option>

                 </select>
              </div>
        </div>
            <div className="row">
              <div className="twelve columns">
                <label>Post</label>
                  <textarea onChange={this.props.getBody}  className="u-full-width" placeholder="get some clout" id="postMessage"></textarea>
                <label>
                  <span>Image Link</span> <br />
                    <input type="search"  onChange={this.props.getImgSrc}/>
                </label>
                  <input className="button-primary" type="button" value="submit" onClick={this.props.submitPost}/>
                  <button onClick={this.props.formClose}>Cancel </button>
               </div>
            </div>

    </div>

    );
  }
}

export default AddPostForm;

import React，{Component}来自'React'；
从“../../components/Navigation/Navagationbar”导入Navagationbar；
从“../../components/Header/Header”导入标题；
从“../../components/SignUp/SignUpButton”导入SignUpButton；
从“/AddPostForm”导入AddPostForm；
导入“./styles.css”；
进口{
链接
}从“反应路由器dom”
类仪表板扩展组件{
render（）{
让rendereposts=null；
让createPostButton=创建帖子；
如果（此.props.openedPost）{
rendereposts=null；
createPostButton=null；
}
否则{
renderPosts=this.props.renderPosts（）；
}
让createPostForm=null；
const openedForm=this.props.form；
if（openedForm）{
createPostForm=
createPostButton=null；
}
log（“打开的表单是”+openedForm）
返回(
{this.props.openedPost？null:}
{createPostForm}
{createPostButton}
{rendereposts}
);
}
}
导出默认仪表板；

AddPostForm.js

class App extends Component {
  constructor(props){
    super(props);



    this.getPostId = this.getPostId.bind(this);
    this.getQuestion = this.getQuestion.bind(this);
    this.makePost = this.makePost.bind(this);
    this.getBody = this.getBody.bind(this);
    this.getPostType = this.getPostType.bind(this);
    this.getImgSrc = this.getImgSrc.bind(this);
    this.submitPost = this.submitPost.bind(this);
    this.formOpen = this.formOpen.bind(this);
    this.formClose = this.formClose.bind(this);

    this.back = this.back.bind(this);
    this.showPost = this.showPost.bind(this);
    this.renderPosts = this.renderPosts.bind(this);

    //Answer/Response methods
    this.makeAnswer = this.makeAnswer.bind(this);
    this.getAnswer = this.getAnswer.bind(this);
    this.submitAnswer = this.submitAnswer.bind(this);

    this.state = {
      posts: [],

        answers: [],

      question: '',
      body: '',
      postType: 'Question',
      imgSrc: '',
      form: false,
      openedPost: null,
      answer: '',
      favorited: false,

      //sign up
      email:'',
      password: '',
      user: null

    }

}
getQuestion(event) {
  event.preventDefault();
  this.setState({ question:event.target.value });
}


render() {


    return (

      <Router>
        <div className="container">
          <Route
                  exact path={"/"}
                  component={() => <Home />}
          />

          <Route
                  exact path={"/home"}
                  component={() => <Home />}
          />

          <Route
                exact path={"/signup"}
                component={() => <SignUp />}
          />

          <Route
                exact path={`/dashboard`}
                component={() =>
                  <Dashboard back={this.back}
                    form={this.state.form}
                      openedPost={this.state.openedPost}
                        renderPosts={this.renderPosts}
                          formClose={this.formClose}
                            formOpen={this.formOpen}
                              posts={this.state.posts}
                                getPostId={this.getPostId}
                                  getQuestion={this.getQuestion}
                                    makePost={this.makePost}
                                      getBody={this.getBody}
                                        getPostType={this.getPostType}
                                          getImgSrc={this.getImgSrc}
                                              submitPost={this.submitPost}
                                                test={this.test}
                                                  question={this.state.question}

                />}
              />



                <Route
                      exact path={`/dashboard/post${this.state.openedPost}`}
                      component={() =>
                        <SinglePost posts={this.state.posts}
                                      openedPost={this.state.openedPost}
                                       getAnswer={this.getAnswer}
                                        makeAnswer={this.makeAnswer}
                                          submitAnswer={this.submitAnswer}
                                            showAnswers={this.showAnswers}
                                              renderAnswers={this.renderAnswers}
                                                renderFavorite={this.renderFavorite}
                                                  userFavorited={this.userFavorited}
                                                    back={this.back}

                      />
                    }

                    />






      </div>
    </Router>
    );
  }

import React, { Component } from 'react';
import Navagationbar from  '../../components/Navigation/Navagationbar';
import Header from  '../../components/Header/Header';
import SignUpButton from  '../../components/SignUp/SignUpButton';
import AddPostForm from './AddPostForm';
import './styles.css';

import {
  Link
} from 'react-router-dom'

class Dashboard extends Component {
  render() {


    let renderedPosts = null;



    let createPostButton =  <div className="container" ><button className="button-primary" onClick={this.props.formOpen}> Create Post </button> </div>;

    if(this.props.openedPost) {
      renderedPosts = null;
      createPostButton = null;
    }
    else {
      renderedPosts = this.props.renderPosts();
    }

        let createPostForm = null;
        const openedForm = this.props.form;
        if(openedForm) {
        createPostForm =
              <AddPostForm
                formClose={this.props.formClose}
                    posts={this.props.posts}
                      getPostId={this.props.getPostId}
                        getQuestion={this.props.getQuestion}
                          makePost={this.props.makePost}
                            getBody={this.props.getBody}
                              getPostType={this.props.getPostType}
                                getImgSrc={this.props.getImgSrc}
                                    submitPost={this.props.submitPost}
                                      question={this.props.question}

                                    />

          createPostButton = null;
        }
        console.log("OPENED FORM IS " + openedForm)
    return (
    <div >
      <SignUpButton />
      <Header />
      <button onClick={this.props.test}/>
      {this.props.openedPost ? null : <Navagationbar />}



        {createPostForm}
        <div className="row">
          <div>
            {createPostButton}
          </div>
        </div>

        <div className="row">



        </div>
      <div className="row">
        <div className="twelve columns">
            {renderedPosts}
        </div>
      </div>

    </div>
    );
  }
}


export default Dashboard;

import React, { Component } from 'react';
import './styles.css';

class AddPostForm extends Component {
    render() {
    return(
      <div className="container">



      <div className="row">
            <div className="six columns">
              <label>Post Title</label>
                <input onChange={this.props.getQuestion} value={this.props.question} className="u-full-width" type="search" placeholder="title" id="exampleEmailInput"/>
            </div>

              <div className="six columns">
                <label>Post Type</label>
                  <select value={this.props.type} onChange={this.props.getPostType} className="u-full-width">
                    <option value="Question">Question</option>
                    <option value="Discussion">Discussion</option>

                 </select>
              </div>
        </div>
            <div className="row">
              <div className="twelve columns">
                <label>Post</label>
                  <textarea onChange={this.props.getBody}  className="u-full-width" placeholder="get some clout" id="postMessage"></textarea>
                <label>
                  <span>Image Link</span> <br />
                    <input type="search"  onChange={this.props.getImgSrc}/>
                </label>
                  <input className="button-primary" type="button" value="submit" onClick={this.props.submitPost}/>
                  <button onClick={this.props.formClose}>Cancel </button>
               </div>
            </div>

    </div>

    );
  }
}

export default AddPostForm;

import React，{Component}来自'React'；
导入“./styles.css”；
类AddPostForm扩展组件{
render（）{
返回(
职称
职位类型
问题:
讨论
邮递
图像链接

取消
);
}
}
导出默认AddPostForm；

编辑： 从

getQuestion

中删除

event.preventDefault（）

后，我可以键入，但为什么输入字段在键入单个字母后会不聚焦

是因为每次我输入后，输入字段都会重新渲染吗

编辑：按要求添加大部分代码

---

在我看来，这已经足够了。如果您想要其余的功能，请告诉我。

最好跟踪用户实际输入的组件中的更改。然后在提交时，调用getQuestion（this.state）

这将是用户正在键入的任何形式的组件

    handleChange(e) {
    let { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.getQuestion(this.state)
  }

---

最好跟踪用户实际输入的组件中的更改。然后在提交时，调用getQuestion（this.state）

这将是用户正在键入的任何形式的组件

    handleChange(e) {
    let { name, value } = e.target;
    this.setState({
      [name]: value,
    });
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.getQuestion(this.state)
  }

---

看完代码后，我注意到所有方法都来自根级组件

App

。在这种情况下，当您键入post title输入字段时，它会立即调用父

getQuestion

方法，该方法通过重新呈现页面来设置状态，从而导致输入字段失去焦点

方法1:
为了解决这个问题，我建议您通过允许

AddPostForm

管理自己的状态来维护它的状态

import React, { Component } from 'react';

class AddPostForm extends Component {
  state = {
    question: ""
  }

  setQuestion = (event) => {
    this.setState({
      question: event.target.value
    });
  }

  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="six columns">
            <label>Post Title</label>
            <input
             onChange={this.setQuestion} // note change
             value={this.state.question} // note change
             className="u-full-width"
             type="search"
             placeholder="title"
             id="exampleEmailInput"
            />
          </div>
          ...
        </div>
      </div>
    );
  }
}

export default AddPostForm;

在

仪表板的
路由
s中，我从使用
路由
的
组件
道具改为使用
渲染
道具。这解决了问题

看完代码后，我注意到所有方法都来自根级组件
App
。在这种情况下，当您键入post title输入字段时，它会立即调用父
getQuestion
方法，该方法通过重新呈现页面来设置状态，从而导致输入字段失去焦点

方法1:

修理