javascript - 按键无法记录所有按键

Question

我正在尝试从文本区域捕获击键，并尝试使用属性 onKeyUp、onKeyPress、onKeyPressCapture、onKeyDown、onKeyDownCapture。他们似乎都错过了一些关键条目:

当我输入新 key 时，之前未显示的 key 之一会按顺序显示。

由于排队延迟，我想我可能需要在控制台日志上添加延迟。但这实际上并没有解决根本问题。有谁知道为什么会发生这种行为？

这里是父组件(App)和子组件(TypeArea)

父级

class App extends React.Component {
  constructor (props) {
    super(props)
    // sets up this.props to function

    this.state = {
      textbox_in_parent_state: 'string passed from state of Parent(App)',
      someVar: 'parent_constructor_state',
      text_from_textarea: ''
    }

    this.handler = this.handler.bind(this)
    this.text_capture_from_parent = this.text_capture_from_parent.bind(this)
  }

  text_capture_from_parent(eventObject) {
    this.setState({
      text_from_textarea: eventObject.target.value
    })
    console.log(this.state.text_from_textarea)
  }


  render() {
    return (
      <div>
        <div className="container">
            <Header />
          <div className="row">
            <div className="col-sm-6">
              <TypeArea textcapture={this.text_capture_from_parent}
              />
            </div>
            <div className="col-sm-6">
              <MarkdownPreview />
            </div>
          </div>
        </div>

      {/* <div style={{textAlign: 'center'}}>*/}
      {/* <h1>App component written in client/components/App.jsx</h1>*/}
      {/* </div>*/}

      </div>
    )
  }
}

export default App

child

import React from 'react';

class TypeArea extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      textbox_text: 'string from state of child "TypeArea"'
    }
    console.log(this.state.textbox_text)
  }

  render() {
    return (
      <div>
        <h1>Typing Area</h1>

        <div className="form-group">

          <textarea className="form-control" id="textbox" rows="25" placeholder="Type Here" onKeyPressCapture={this.props.textcapture}>

          </textarea>

          <button onClick={this.props.passdown}>Click me</button>

        </div>

      </div>);
  }
}

export default TypeArea

Answer 1

text_capture_from_parent(eventObject) {
  this.setState({
    text_from_textarea: eventObject.target.value
  })
  console.log(this.state.text_from_textarea)
}

this.setState() 是异步的，你在设置状态后直接调用 console.log(..)，此时状态可能没有'已经成功更改了。但幸运的是 this.setState(..) 在完成设置新状态时提供回调。所以你可以这样调用它:

this.setState({
  text_from_textarea: eventObject.target.value
}), () => {
  console.log(this.state.text_from_textarea);
});

您应该看到实际值。