Next.jsでアプリ作成中に、テキスト入力欄でのonKeypressが効きません。

Question

現在React.js,Next.jsの入門書に沿ってアプリを作成しているのですが、疑問点が出ました。

inputの欄に入れた数字を取得し足していくというアプリなのですが、inputのなかでenterを押したらonKeyPressのイベントが作動するようにしたいです。

しかし現状Enterキーを押しても何も起きません。
onKeyPress関数は、ただ条件でdoAction関数を実行させているだけであること、またdoAction関数を直接呼び出すEnterボタンを作成したところしっかり動くことから、onKeypress関数の条件の部分がうまく作動していないと思われるのですが、よくわかりません。

アプリの見た目は以下のような感じです。input欄に数字を入れ、

①エンターキーを押す
②Enterボタンを押す

どちらでもtotalが更新されることを想定しています。
しかし現状①だけ効かないです。

![

コードは以下になります。

class Calc extends Component {
    style={
        fontSize:"12pt",
        padding:"5px 10px"
    }

    constructor(props){
        super(props);
        this.state={
            input:"",
        };
        this.onChange=this.onChange.bind(this);
        this.onKeypress=this.onKeypress.bind(this);
        this.doAction=this.doAction.bind(this);
        this.reset=this.reset.bind(this);

    }

    onChange(e){
        this.setState({
            input:e.target.value
        });
    }

    onKeypress(e){
        if (e.keyCode === 13){
            this.doAction(e);
        }
    }

    doAction(e){
        this.setState({
            input:"",
        });
        return this.props.dispatch({type:"ENTER",value:this.state.input});
    }

    reset(e){
        this.setState({
            input:"",
        });
        return this.props.dispatch({type:"RESET"});
    }


    render(){
        let result=[];
        let n=this.props.data.length;
        for (let i=0;i<n;i++){
            result.push(<tr key={i}>
                <tr>{this.props.data[i]}</tr>
                <td>{this.props.number[i]}</td>
            </tr>);
        }

        return (
            <div>
                <p>TOTAL:{this.props.result}</p>
                <input type="text" style={this.style} size="40" value={this.state.input} 
                    onChange={this.onChange} onKeyPress={this.onKeyPress}/>
                <button style={this.style} onClick={this.doAction} >Enter</button>
                <button style={this.style} onClick={this.reset} >Reset</button>
                <hr/>
                <table>
                    <tbody>{result}</tbody>
                </table>
                <p>{this.props.message}</p>
            </div>
        )
    }

}

Calc=connect((state)=>state)(Calc);
export default Calc;