更新 ReactJS 中输入 onkeypress 中的值答案

【问题标题】：Update values in input onkeypress in ReactJS更新 ReactJS 中输入 onkeypress 中的值
【发布时间】：2017-12-16 10:20:40
【问题描述】：

我一直在尝试了解如何使用 ReactJS 根据窗口中的按键更新输入。我正在构建一个基本的计算器，它只有一个输入。我希望输入始终成为目标，一旦按下键并更新值。我还有另一个验证功能，所以按键功能仍然会通过验证功能。谢谢！

我有这样的事情：

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

我只是不知道适合它的正确位置，因为它说语法错误：意外标记，指向“。”在“window”和“onkeypress”之间

【问题讨论】：

标签： javascript reactjs

【解决方案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()

【讨论】：

谢谢，我明白了。但我的意思是当从窗口按下一个键时，即使用户已经使用了焦点输入。它意味着返回输入然后更新值
好吧，我的想法是使用 onkeypress 监听器。您可以设置它，然后检索按下的键，并通过该更新状态，这将更新输入元素
stackoverflow.com/questions/1846599/… 这似乎很好地解释了如何处理按键，以及如何检索它们的值
或者实际上，这似乎对您的需求有好处，因为您不需要引用特定的输入元素，它将是全局的 stackoverflow.com/questions/2878983/… 希望其中一个对您有所帮助

【解决方案2】：

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

import ... from ...;

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

class App extends ... {
    ...
 }

export default App;

【讨论】：