rn-8-1. TextInputの使い方

TextInputでユーザー入力を受け取る方法を学びます

React Native - 第2章: React Native基礎 - インタラクションとリスト

📚

課題：TextInputの使い方を学ぼう

TextInputは、ユーザーからテキストを入力してもらうためのコンポーネントです。名前を入力して表示してみましょう。

やること

1.useStateで名前の状態を管理する
2.TextInputで名前を入力できるようにする
3.onChangeTextで入力内容を状態に保存
4.入力された名前を下に表示する

TextInputの使い方

TextInputをインポートします：

import { View, Text, TextInput, StyleSheet } from 'react-native';
import { useState } from 'react';

useStateで入力値を管理します：

const [name, setName] = useState('');

<TextInput
  style={styles.input}
  value={name}
  onChangeText={setName}
  placeholder="名前を入力"
/>

value: 表示する値
onChangeText: 入力が変わったときに呼ばれる関数
placeholder: 入力前に表示されるヒント

ポイント：onChangeTextは新しい値を直接受け取るので、setNameをそのまま渡せます。

期待される出力

[名前を入力: 太郎]

入力された名前: 太郎

import { View, Text, TextInput, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function App() {
  // ここにnameの状態を作成してください
  
  
  return (
    <View style={styles.container}>
      <Text style={styles.label}>名前を入力してください</Text>
      
      {/* ここにTextInputを追加してください */}
      {/* value、onChangeText、placeholderを設定 */}
      
      
      <Text style={styles.result}>
        入力された名前: {/* ここにnameを表示 */}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
  label: {
    fontSize: 18,
    marginBottom: 10,
    fontWeight: 'bold',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    fontSize: 16,
    marginBottom: 20,
  },
  result: {
    fontSize: 16,
    marginTop: 10,
  },
});

Open Sandbox

← 前のレッスン: rn-7-4. Flexboxレイアウト（横方向）

次のレッスン: rn-8-2. ButtonとTouchableOpacity →