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

我只是不知道适合它的正确位置，因为它表示语法错误：意外的令牌，指向＆＃34;。＆＃34;在＆＃34;窗口之间＆＃34;和＆＃34; onkeypress＆＃34;

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;

在ReactJS中更新输入onkeypress中的值

2 个答案: