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

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

ただいまの
回答率

90.51%

  • Ruby on Rails

    8376questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ruby on Rails 5

    2791questions

  • API

    1741questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • POST

    262questions

    POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

  • React Native

    239questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

React Native + RailsでRailsのAPIにPOSTしたい

解決済

回答 1

投稿

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

kimkim

score 60

実現したいこと

まず最初に、私はとても初心者なので意味の分からないことを言っていたらごめんなさい。

実現したいことは、React Nativeで作成中のアプリで、TextInputに入力した値を
Rails APIを通してDBに保存したいということです。

現状

現在の状況として、
ReactNativeで新規アプリを作成して、文字入力はできるようになっています。

そして、RailsをAPIモードで作成し、Postモデルを作成しました。

そこで
"http://localhost:3000/posts/new"
このURLにアクセスすることによってTextInputの内容をPostモデルに保存しようとしています。
以下にソースコードをのせます

React Native

TextInputに入力された値をPostする画面です

//CreateNewEventCardScreen.js

import React, { Component } from 'react';
import { 
  View,
  Text,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Alert,
} from 'react-native';

export default class CreateNewEventCardScreen extends Component {
  state = {
    inputValue: "いまどうしてる?"
  };

  _handleTextChange = inputValue => {
    this.setState({inputValue});
  }

 /* ==========================================================
     ==========================================================
                 POSTしようとしているメソッドです
     ==========================================================
     ========================================================== */
  postValueToAPI() {
    fetch('http://localhost:3000/posts/new', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        content: this.state.inputValue,
      }),
    });
  }

  render() {
    console.log(this.state);
    return (
      <View style={styles.container}>
        <TextInput
          value={this.state.inputValue}
          onChangeText={this._handleTextChange}
          style={styles.txtInput}
          multiline={true}
        />
        <TouchableOpacity onPress={this.postValueToAPI.bind(this)}>
          <View style={styles.postBtn}>
            <Text style={{color:"white"}}>送信</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    //justifyContent: "center",
  },
  txtInput: {
    width:"80%",
    height:200,
    borderWidth:0.5,
    borderColor:"gray",
    padding:8,
    marginTop:50,
  },
  postBtn: {
    width:120,
    height:35,
    borderRadius:10,
    backgroundColor:"blue",
    marginTop:20,
    alignItems: "center",
    justifyContent: "center",
  }
})
Ruby on Rails
//routes.rb

Rails.application.routes.draw do
  resources :users
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

  # post
  get "posts" => "posts#index"
  post "posts/new" => "posts#new"
end
//posts_controller.rb

class PostsController < ApplicationController

  # GET /posts
  def index
    @posts = Post.all.reverse_order

    render json: @posts
  end

  # POST /posts/new
  def new
    @post = Post.new(post_params)

    if @post.save
      render json: @post, status: :created, location: @post
    else
      render json: @post.errors, status: :unprocessable_entity
    end
  end

  private
    # Only allow a trusted parameter "white list" through.
    def post_params
      params.fetch(:post, {})
    end

end

React Native側のPostするためのpostValueToAPIメソッド
は完全にコピペでどういう意味なのか分かっていません。

またPostsControllerのnewアクションも
もともとあったUsersControllerのcreateアクションのコピペになってます。

教えていただきたいこと

以上から、
・ReactNativeのPostのメソッドの書き方
・newアクション内でどのようにしてTextInputの情報をうけとるのか
を教えていただきたいです。

よろしくお願いいたしいます。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

0

URLを
'http://localhost:3000/posts/new' => 'http://192.168.33.10:3000/posts/new'
に変更したらできました。

また、TextInputに入力した値はparams[:content]で取得できました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • Ruby on Rails

    8376questions

    Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

  • Ruby on Rails 5

    2791questions

  • API

    1741questions

    APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

  • POST

    262questions

    POSTはHTTPプロトコルのリクエストメソッドです。ファイルをアップロードしたときや入力フォームが送信されたときなど、クライアントがデータをサーバに送る際に利用されます。

  • React Native

    239questions

    React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。