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

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

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

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

React.js

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

Q&A

解決済

2回答

1036閲覧

ReactNativeのTextInputの{text}が理解できない

shuhei-o

総合スコア2

React Native

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

React.js

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

0グッド

0クリップ

投稿2021/10/21 13:55

前提・実現したいこと

ReactNativeでログイン画面を作成しようとしています。

わからないこと

ソースコードを見ながらTextInputを実装しているのですが、{text}というものが出てきて
それが理解できません。呼び出し元のプロパティにtextというものを指定していないのに、なぜ値が入るのでしょうか。

該当のソースコード

js

1const Input = ({onChangeText, icon, style, text, label,iconPosition, error, ...props}) => { 2 3 const [focused, setFocused] = React.useState(false); 4 5 6 const getFlexDirection = () =>{ 7 8 if(icon && iconPosition){ 9 if(iconPosition==="left"){ 10 return "row"; 11 } 12 else if(iconPosition==="right"){ 13 return "row-reverse"; 14 } 15 } 16 }; 17 18 const getBorderColor=()=>{ 19 if(error){ 20 return colors.danger; 21 } 22 if(focused){ 23 return colors.primary; 24 } 25 26 else{ 27 return colors.grey; 28 } 29 } 30 return ( 31 <View style={styles.inputContainer}> 32 {label && <Text>{label}</Text>} 33 <View style={[styles.wrapper,{alignItems:icon ? 'center':'baseline' },{borderColor:getBorderColor(),flexDirection: getFlexDirection()}]}> 34 <View>{icon && icon}</View> 35 <TextInput 36 style={styles.textInput} 37 onChangeText={onChangeText} 38 value={text} 39 onFocus={()=>{setFocused(true)}} 40 onBlur={()=>{setFocused(false)}} 41 {...props} 42 /> 43 </View> 44 45 {error && <Text style={styles.error}>{error}</Text>} 46 </View> 47 ) 48} 49 50 51 52export default Input

呼び出し元

<Input label="email" iconPosition="right" placeholder="Enter Email" onChangeText={(value)=>{ onChange({name: "email", value}) }}>

試したこと

呼び出し元のInputにtext="test"といれてみると、
TextInputに入力すると常に"test"が入るようになり、ますます意味がわかりません。

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

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

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

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

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

guest

回答2

0

自己解決

すみません。
textではなくてvalueでした。
ただのスペルミスでした。

投稿2021/10/21 23:42

shuhei-o

総合スコア2

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

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

0

Inputコンポーネントのpropとしてtextを渡しているからとしか答えようがありませんが、何がわからないのでしょうか?

const Input = ({onChangeText, icon, style, text, label,iconPosition, error, ...props}) => {

投稿2021/10/21 14:52

k4a

総合スコア983

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

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

shuhei-o

2021/10/21 23:42

すみません。 textではなくてvalueでした。 ただのスペルミスでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問