0

I have been trying to get how to update an input based on keypress in window with ReactJS. I'm building a basic calculator, and it has only one input. I want the input to always be targeted once a key is pressed and also update the values. I also have another function for validation, so the keypress function will still pass through the validation function. Thank you!

I have something like this:

window.onkeypress = function(e){
    this.inputFocus(); //my custom function to position the cursor in the input
    this.setState({display: this.state.display + e.key});
}

I just don't know the proper location to fit it in cos it says syntax error: unexpected token, pointing at the "." between "window" and "onkeypress"

Oluwatobiloba
  • 13
  • 4

2 Answers2

0

If you have focus on the input field, by pressing a button, it should enter the value into that input field, and so all you should need to do is make your input a controlled component by doing the following

export default class YourClass extends Component {
    constructor(props) {
        super(props);
        this.state = {
            numberValue: 0
        }
    }
    updateValue = (numberValue) => {
        this.setState({numberValue})
    }
    render() {
        return (
            <input 
                type='number'
                value={this.state.numberValue} // this is initialized in this.state inside the constructor
                onChange={(input) => this.updateValue(input.target.value)}
            />
        )
    }
}

So whenever you change the value, it will automatically update the state, which then sets the value of your input. This is all predicated on you having focus on that input though, so make sure it has focus.

You can assign focus by referencing the element through javascript like...

document.getElementById('yourElement').focus()
SALEH
  • 1,552
  • 1
  • 13
  • 22
Jake Boomgaarden
  • 3,394
  • 1
  • 17
  • 31
  • Thanks, I get that. But I meant when a key is pressed from the window even though the user has used out focused the input. It's meant to go back to the input and then update the values – Oluwatobiloba Dec 16 '17 at 10:36
  • well, for that my thought would be to use an onkeypress listener. You can set that, and then retrieve the pressed key, and through that update the state, which will update the input element – Jake Boomgaarden Dec 16 '17 at 10:41
  • https://stackoverflow.com/questions/1846599/how-to-find-out-what-character-key-is-pressed This seems to have a good explanation for how to handle key presses, and how to retrieve their values – Jake Boomgaarden Dec 16 '17 at 10:42
  • or actually, this seems to be good for your needs because you don't need to reference a specific input element, it would be global https://stackoverflow.com/questions/2878983/capture-key-press-without-placing-an-input-element-on-the-page Hope one of these helps you – Jake Boomgaarden Dec 16 '17 at 10:44
0

OK here it is... I called the window.onkeydown function outside the class as it doesn't update any state. And I later realised that window.onkeydown targets and add the values in the input

import ... from ...;

window.onkeydown = function(e) {
    input.focus()
}

class App extends ... {
    ...
 }

export default App;
Oluwatobiloba
  • 13
  • 4