現在React.js,Next.jsの入門書に沿ってアプリを作成しているのですが、疑問点が出ました。
inputの欄に入れた数字を取得し足していくというアプリなのですが、inputのなかでenterを押したらonKeyPressのイベントが作動するようにしたいです。
しかし現状Enterキーを押しても何も起きません。
onKeyPress関数は、ただ条件でdoAction関数を実行させているだけであること、またdoAction関数を直接呼び出すEnterボタンを作成したところしっかり動くことから、onKeypress関数の条件の部分がうまく作動していないと思われるのですが、よくわかりません。
アプリの見た目は以下のような感じです。input欄に数字を入れ、
①エンターキーを押す
②Enterボタンを押す
どちらでもtotalが更新されることを想定しています。
しかし現状①だけ効かないです。
コードは以下になります。
JavaScript
1class Calc extends Component { 2 style={ 3 fontSize:"12pt", 4 padding:"5px 10px" 5 } 6 7 constructor(props){ 8 super(props); 9 this.state={ 10 input:"", 11 }; 12 this.onChange=this.onChange.bind(this); 13 this.onKeypress=this.onKeypress.bind(this); 14 this.doAction=this.doAction.bind(this); 15 this.reset=this.reset.bind(this); 16 17 } 18 19 onChange(e){ 20 this.setState({ 21 input:e.target.value 22 }); 23 } 24 25 onKeypress(e){ 26 if (e.keyCode === 13){ 27 this.doAction(e); 28 } 29 } 30 31 doAction(e){ 32 this.setState({ 33 input:"", 34 }); 35 return this.props.dispatch({type:"ENTER",value:this.state.input}); 36 } 37 38 reset(e){ 39 this.setState({ 40 input:"", 41 }); 42 return this.props.dispatch({type:"RESET"}); 43 } 44 45 46 render(){ 47 let result=[]; 48 let n=this.props.data.length; 49 for (let i=0;i<n;i++){ 50 result.push(<tr key={i}> 51 <tr>{this.props.data[i]}</tr> 52 <td>{this.props.number[i]}</td> 53 </tr>); 54 } 55 56 return ( 57 <div> 58 <p>TOTAL:{this.props.result}</p> 59 <input type="text" style={this.style} size="40" value={this.state.input} 60 onChange={this.onChange} onKeyPress={this.onKeyPress}/> 61 <button style={this.style} onClick={this.doAction} >Enter</button> 62 <button style={this.style} onClick={this.reset} >Reset</button> 63 <hr/> 64 <table> 65 <tbody>{result}</tbody> 66 </table> 67 <p>{this.props.message}</p> 68 </div> 69 ) 70 } 71 72} 73 74Calc=connect((state)=>state)(Calc); 75export default Calc;
あなたの回答
tips
プレビュー