質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • React.js

    720questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Onsen UI

    314questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。

Reactのformが上手く動作しない

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 268

cloudspider

score 67

OnsenUIとReactを使ってアプリ開発をしています。
この中でformのinputを実装しているのですが、上手く動作しません。

フレームワークにはreact-materializeのInputを使っていますが、
react-onsenuiのInputでも、デフォルトのinputでも同じような挙動になります。

いくつか試してみました。

class TestInputField extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      yourName: 'test',
    }
  }

  handleChange(e){
    console.log(`handleChange ${this.state.yourName}`);
    this.setState({
      yourName: e.target.value,
    })
  }

  render() {
    return(
        <div>
          <form>
            <Input
              className="input-fields"
              s={10}
              label="your name"
              value={this.state.yourName}
              onChange={this.handleChange}
            />
          </form>
        </div>
    )
  }
}


このままだと文字は入力できるのですが、コンソールを見ると
Cannot read property 'state' of undefinedというエラーが表示されています。

調べてみるとbind(this)をしていないからとあったので、コンストラクタの中に1行追加してみました。

  constructor(props) {
    super(props)
    this.state = {
      yourName: 'test',
    }
    this.handleChange = this.handleChange.bind(this)
  }


こうするとエラーは表示されなくなったのですが、以下のgif画像の様に一文字入れるたびにフォーカスが離れてしまいます。連続で文字を打つためには一文字入力するたびにクリック(またはタップ)する必要があります。
これはmonacaのLocalKitのプレビュー上の画像ですが、デバッガーを使ってスマホ上で操作してみても同じ現象が起きました。

イメージ説明

<Input
              className="input-fields"
              s={10}
              label="your name"
              value={this.state.yourName}
              onChange={(e) => this.handleChange(e)}
            />


知識がないなりにonChangeの書き方がまずいのかと思い上の様に変更してみましたが、同じくエラー無しで人文字入力するたびにフォーカスが離れています。

これは、monaca,OnsenUI,Reactの使い方のどこに問題があるのでしょうか。
どなたかご存じの方がいらっしゃれば教えて頂けるとうれしいです。
よろしくお願いします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

※注意 この記法はES7以降、またはBabelでプラグインを入れた場合しか使用できないようです
http://blog.jeremyfairbank.com/javascript/javascript-es7-function-bind-syntax/

thisbindする関数オブジェクトの渡し方は以下のような書き方がスマートです。function bind syntaxというそうです。

<Input
  className="input-fields"
  s={10}
  label="your name"
  value={this.state.yourName}
  onChange={::this.handleChange}
  />

「一文字入れるたびにフォーカスが離れてしまいます」とのことですが、そちらは私にはわかりません。React単体ではこれで問題なく動きますので、おそらくOnsenUIかMonacaが原因かと思われます。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/04 19:43

    回答ありがとうございます。
    その記法は初めて見たのですが、なんというキーワードで調べると出てきますでしょうか?

    キャンセル

  • 2017/10/05 09:05

    どこかで見て以来自然と使っていたので自分でも知りませんでしたが、情報を追記しました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • React.js

    720questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Onsen UI

    314questions

    HTML5で記述されたモバイルアプリの高速化、およびネイティブアプリライクなUIが作れるフレームワーク。 様々なJavaScriptフレームワークと併せて使用することができます。スマートフォン向けアプリ、Webサイトに必要なアニメーション、UI/UXを実装することが可能になります。