在ReactJS中更新onkeypress输入中的值

Question

我一直在尝试获取如何使用ReactJS在窗口中基于按键更新输入。 我正在构建一个基本的计算器，它只有一个输入。 我希望输入总是在按下某个键后成为目标，并且还要更新值。 我还具有另一个验证功能，因此keypress功能仍将通过验证功能。 谢谢！

我有这样的事情：

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

我只是不知道将其放置在cos中的正确位置，因为它显示语法错误：意外的标记，指向“。” 在“窗口”和“ onkeypress”之间

Answer 1

如果您专注于输入字段，则可以通过按按钮将值输入到该输入字段中，因此，您需要做的就是通过执行以下操作使输入成为受控组件

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

因此，无论何时更改值，它都会自动更新状态，然后设置输入的值。 所有这些都取决于您是否专注于该输入，因此请确保它具有焦点。

您可以通过javascript引用元素来分配焦点，例如...

document.getElementById('yourElement').focus()

Answer 2

好的，这里是...我在类外调用了window.onkeydown函数，因为它不更新任何状态。 后来我意识到window.onkeydown定位并在输入中添加值

import ... from ...;

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

class App extends ... {
    ...
 }

export default App;