OnsenUIとReactを使ってアプリ開発をしています。
この中でformのinputを実装しているのですが、上手く動作しません。
フレームワークにはreact-materializeのInputを使っていますが、
react-onsenuiのInputでも、デフォルトのinputでも同じような挙動になります。
いくつか試してみました。
javascript
1class TestInputField extends React.Component { 2 3 constructor(props) { 4 super(props) 5 this.state = { 6 yourName: 'test', 7 } 8 } 9 10 handleChange(e){ 11 console.log(`handleChange ${this.state.yourName}`); 12 this.setState({ 13 yourName: e.target.value, 14 }) 15 } 16 17 render() { 18 return( 19 <div> 20 <form> 21 <Input 22 className="input-fields" 23 s={10} 24 label="your name" 25 value={this.state.yourName} 26 onChange={this.handleChange} 27 /> 28 </form> 29 </div> 30 ) 31 } 32}
このままだと文字は入力できるのですが、コンソールを見ると
Cannot read property 'state' of undefined
というエラーが表示されています。
調べてみるとbind(this)をしていないからとあったので、コンストラクタの中に1行追加してみました。
javascript
1 constructor(props) { 2 super(props) 3 this.state = { 4 yourName: 'test', 5 } 6 this.handleChange = this.handleChange.bind(this) 7 }
こうするとエラーは表示されなくなったのですが、以下のgif画像の様に一文字入れるたびにフォーカスが離れてしまいます。連続で文字を打つためには一文字入力するたびにクリック(またはタップ)する必要があります。
これはmonacaのLocalKitのプレビュー上の画像ですが、デバッガーを使ってスマホ上で操作してみても同じ現象が起きました。
javascript
1<Input 2 className="input-fields" 3 s={10} 4 label="your name" 5 value={this.state.yourName} 6 onChange={(e) => this.handleChange(e)} 7 />
知識がないなりにonChangeの書き方がまずいのかと思い上の様に変更してみましたが、同じくエラー無しで人文字入力するたびにフォーカスが離れています。
これは、monaca,OnsenUI,Reactの使い方のどこに問題があるのでしょうか。
どなたかご存じの方がいらっしゃれば教えて頂けるとうれしいです。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/04 10:43
2017/10/05 00:05