onChange bu benim işlemek işlevidir metnin

Question

son karakterini yakalamak değil React:

render: function() { 
    return <div className="input-group search-box"> 
       <input 
       onChange={this.handleTextChange} 
       type="text" 
       value={this.state.text} 
       className="form-control search-item" /> 
       <span className="input-group-btn"></span> 
     </div> 
    } 

ve benim olay işleyicisi olarak bu var:

handleTextChange: function(event) { 
    console.log(event.target.value); 
    this.setState({ 
     text: event.target.value 
    }); 
    } 

sorun olduğunda ben bir öğeyi "kaydetmek" veya çıktıyı yazdırmak, son karakter eksik - örneğin, "ilk" girersem, "köknar" yazdırılır, ve yakalanması gereken başka bir anahtar olay olması gerekir son karakter Bir şey yazmama izin vermeyen onKeyUp'u denedim ve hiçbir şey çıkarmayan onKeyDown ve onKeyPress'u denedim. Burada neler oluyor ve neden? ve o son karakteri nasıl gösterebilirim?

Answer 1

Durumu ne zaman kaydediyorsunuz? setState'un eşzamansız olduğunu unutmayın, bu nedenle yeni durumunu yazdırmak istiyorsanız, geri arama parametresini kullanmanız gerekir. konsola açmış olan aşağıdaki sonuçlanacaktır girdi sonunda bir d yazarak

let Comp = React.createClass({ 
    getInitialState() { 
    return { text: "abc" }; 
    }, 

    render() { 
    return (
     <div> 
     <input type="text" value={this.state.text} 
       onChange={this.handleChange} /> 
     <button onClick={this.printValue}>Print Value</button> 
     </div> 
    ); 
    }, 

    handleChange(event) { 
    console.log("Value from event:", event.target.value); 

    this.setState({ 
     text: event.target.value 
    },() => { 
     console.log("New state in ASYNC callback:", this.state.text); 
    }); 

    console.log("New state DIRECTLY after setState:", this.state.text); 
    }, 

    printValue() { 
    console.log("Current value:", this.state.text); 
    } 
}); 

: Bu bileşeni düşünün orta değer son karakteri eksik olduğunu

Value from event: abcd 
New state DIRECTLY after setState: abc 
New state in ASYNC callback: abcd 

dikkat edin. Here's a working example.