Keypressはすべてのキーストロークを記録できません

Question

私はテキストエリアからキーストロークをキャプチャしようとしており、onKeyUp、onKeyPress、onKeyPressCapture、onKeyDown、onKeyDownCaptureの属性を使って試しました。それらのすべては、いくつかの重要な項目を欠場するようだ：

私は新しいキー、そして前に番組を表示されなかったもののいずれかを入力し、順番に。

遅延があるため、私はコンソールログに遅延を入れる必要があると考えています。しかし、それは根本的な問題を実際には解決しません。誰もがこの現象が起こっている理由を知っていますか？ここで

は、親（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 

子供

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()は非同期であり、 d状態を設定した後で直接console.log(..)と呼んでいますが、この時点で状態が既に正しく変更されていない可能性があります。幸いにもthis.setState(..)は、新しい状態の設定を完了したときにコールバックを提供しています。したがって、次のように呼び出すことができます：

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

実際の値が表示されます。