Why can't update a state when use onKeyPress [duplicate]

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
– trincot, Commented Feb 26, 2018 at 20:22
I edited the post, he is not solved my problem, the value is always not updating, is always at null — KolaCaine
– KolaCaine, Commented Feb 26, 2018 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) — nanobar
– nanobar, Commented Feb 26, 2018 at 20:26
It's done, Before posted here I use pEvt.key === "enter" but I forget the capitalize on eso it's solved my problem thanks a lot — KolaCaine
– KolaCaine, Commented Feb 26, 2018 at 20:31

JohnPkaza · Accepted Answer · 2018-02-26 21:36:35Z

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;

fyasir · Accepted Answer · 2018-02-26 20:34:05Z

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, 2018 at 20:34

fyasir

2,9902 gold badges26 silver badges36 bronze badges

Comments

Charles Owen · Accepted Answer · 2018-02-26 20:46:46Z

0

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 } />

answered Feb 26, 2018 at 20:46

Charles Owen

2,9802 gold badges24 silver badges31 bronze badges

Collectives™ on Stack Overflow

Why can't update a state when use onKeyPress [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related