Why can't update a state when use onKeyPress

Question

Please considering this follow code, I can't update inputVal when I using a Keypress event handler.

import React, { Component, Fragment } from 'react';
import List from './List';
import './ListTodos.css';

class Todos extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal: null
         }
         this.refInput = null
         this._handleChange = this._handleChange.bind(this)
    }
    _handleChange(pEvt) {
        if (pEvt.keyCode === "13") {
            this.setState({
                inputVal: this.refInput.value
            })
            console.log(this.state.refInput)
        }
    }
    render() { 
        const { text } = this.props;
        return ( 
            <Fragment>
                <div className="form">
                    <input ref={input => {this.refInput = input}} onKeyDown={pEvt => this._handleChange(pEvt)} className="form__input" placeholder={ text } />
                    <div>
                        <List TxtVal={this.state.inputVal} />
                    </div> 
                </div>
            </Fragment>
         )
    }
}

export default Todos;

The enter/return key will trigger the event with `pEvt.key` equal to "Enter", not "13". NB: I don't see a problem with `this`. — trincot, Feb 26 '18 at 20:22
I edited the post, he is not solved my problem, the value is always not updating, is always at `null` — KolaCaine, Feb 26 '18 at 20:24
fyi keyCode is deprecated, use key instead. Also you're using an arrow function and a bind, demonstrating you need to understand what they're actually doing (use one or the other). Also you're using refInput instead of simply pEvt.target.value - no ref needed. Also you've called it pEvt, perhaps suggesting you've carried over this pointer concept from other langs (all objects are passed by reference) — Dominic, Feb 26 '18 at 20:26
It's done, Before posted here I use `pEvt.key === "enter"` but I forget the capitalize on `e`so it's solved my problem thanks a lot — KolaCaine, Feb 26 '18 at 20:31

score 1 · Answer 1 · answered Feb 26 '18 at 21:36

I really dont like using on onKeyDown. Instead you can use onChange which i think its better.

So Basically you need can do this too.

class Todos extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal: null
        }
         this._handleChange = this._handleChange.bind(this)
    }
    
    _handleChange(e) {
        if (e.keyCode === "13") {
            this.setState({
                inputVal: e.target.value
            })
            console.log(e.target.value)
        }
    }
    
    render() { 
        const { text } = this.props;
        return ( 
            <Fragment>
                <div className="form">
                    <input name="todo" onChange={(e) => this._handleChange(e)} className="form__input" placeholder={ text } />
                    <div>
                        <List TxtVal={this.state.inputVal} />
                    </div> 
                </div>
            </Fragment>
         )
    }
}

export default Todos;

score 0 · Answer 2 · answered Feb 26 '18 at 20:34

0

Use pEvt.target.value instead of this.refInput.value

_handleChange(pEvt) {
  if (pEvt.keyCode === "13") {
    this.setState({
      inputVal: pEvt.target.value
    });
    console.log(this.state.inputVal);
  }
}

answered Feb 26 '18 at 20:34

fyasir

2,924
2
23
36

score 0 · Answer 3 · answered Feb 26 '18 at 20:46

You're actually using the KeyDown event in your code instead of KeyPress as you asserted. It looks like you're just trying to get the value of the input element right?

I'd create a handler for the onchange event instead for the input. You're just trying to get the value of the input. And you wouldn't even need your ref.

_handleChange(e) {

        this.setState({
            inputVal: e.target.value
        });            

}
constructor() {
    // wire up your event handler
    this._handleChange = this._handleChange.bind(this);
}
...
<input onChange={this._handleChange} className="form__input" placeholder={ text } />

Why can't update a state when use onKeyPress

3 Answers3