Question

所以我试图让按键响应。

import React, {Component} from 'react';
import PropTypes from 'prop-types'

class ItemTextEdit extends React.Component {
    constructor(){
        super();
        this.state = {
            displayText: '',
            isEditing: false
        };
        this.handleKeyPress = this.handleKeyPress.bind(this);
    }

    handleKeyPress(event) {
        console.log(event.target.value);
        if(event.key == 'Enter'){
            console.log('enter press here! ')
        }
    }

    componentDidMount(){
        const { displayText} = this.props;
        this.setState({ displayText });
    }

    render(){
        return(
            <span className="displayList">
                <span><input name="inputValue" className="inputValue" value={this.state.displayText} type="text" onKeyDown={this.handleKeyPress} /></span>    
            </span>
        )
    }
}export default ItemTextEdit;

ItemTextEdit.PropTypes = {
    displayText: PropTypes.string
}

我没有得到任何类型的console.log响应。我试图在这个组件中取出额外的方法。我只想要一个输入字段来响应onKeyPress。我尝试过使用onKeyDown但它仍然无法正常工作。我看到很多帖子回答它需要绑定到处理程序，但我在构造函数中这样做。任何想法将不胜感激。谢谢。

Answer 1

有效的最终代码：

handleKeyPress(event) {
    console.log("key is pressed");
    console.log(event.charCode);
    if(event.charCode == 13){
        this.setState({isEditing: !this.state.isEditing});
    }
}

这不起作用：

if(event.key == 'Enter'){

在React 16中反应代码没有响应onKeyPress。

1 个答案: