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

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

新規登録して質問してみよう
ただいま回答率
85.49%
React Native

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

Q&A

解決済

1回答

2237閲覧

React Nativeでフォームを作る時にstateで値がとれない

ois

総合スコア50

React Native

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

0グッド

0クリップ

投稿2018/09/12 07:30

編集2018/09/14 00:25

React Nativeを勉強していますが、stateの扱いにつまづいています。
アンケートフォームのようなものを作りたいのですが、

  • 値の受け渡し(stateを用いると思うのですが、FormInputの値をどう表すかわかりません)
  • 値を受け取って処理するコードをどこに書くか、どう書くか

に困っています。

React.js

1import React, {Component} from 'react'; 2import {DatePickerIOS, StyleSheet, View} from 'react-native'; 3import { FormLabel, FormInput } from 'react-native-elements'; 4 5class Hoge extends Component{ 6 constructor(){ 7 this.state={ 8 name: "", 9 date: new Date(), 10 comment: "" 11 } 12 } 13 render(){ 14 return( 15 <View style={styles.container}> 16 <FormLabel>名前</FormLabel> 17 <FormInput onChangeText={() => this.setState({name: this.name})}/>/* ここがわからない */ 18 <DatePickerIOS onDateChange={() => this.setState({date: this.date})}/> 19 <FormLabel>コメント</FormLabel> 20 <FormInput onChangeText={() => this.setState({comment: this.comment})}/> 21 </View> 22 ); 23 } 24} 25 26export default class App extends Component{ 27 render(){ 28 return( 29 <Hoge /> 30 ); 31 } 32} 33 34const styles = StyleSheet.create({ 35 container: { 36 flex: 1, 37 justifyContent: 'center', 38 backgroundColor: '#fff', 39 } 40});

<FormInput onChangeText={() => this.setState({name: this.name})}/>
はサンプルを参考に考えて書いていたのですが、inputに入力された値自体が渡せていないと思います。どうやってinputに入力された値をstateに保存するのでしょうか。

次に、今はボタンは上記コードにはないのですが、SUBMITボタンを作成し、押下するとinputの値をとってきてファイルに書き込むという処理をしたいです。
この部分について

  • どこに書くと適切か(App.jsではないですよね?)
  • submitのタイミングでフォームの値を取得するのは、stateを参照するので正しいか

という点が気になっています。

初心者で、ドキュメントを読んでもわからず、ネット上にもフォーム作成についてわかりやすい記事がなくて困っています。ご教授いただければ幸いです。
よろしくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

onChangeText={() =>
の()に値を渡せば大丈夫みたいでした。
また、constructorにsuperが足りないので、上記コードだとエラーになります。

投稿2018/09/15 06:51

ois

総合スコア50

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問