1. ホーム
  2. React Native
  3. TextInputとイベント 【これからはじめるReact Native】

TextInputとイベント 【これからはじめるReact Native】

目次

  1. はじめに
  2. TextInputとイベント
  3. まとめ

はじめに

前回はReact Nativeのレイアウト反映の方法をご紹介しました。

レイアウトを整える【これからはじめるReact Native】


今回はテキストの入力エリアに文字を入力し、それを表示させる部分を実装します。
当たり前のように見えますが、入力イベントを検知しそこから値を表示させる実装となっており、state やイベントに関する理解が進むと思います。

TextInputとイベント

では、前回までと同じようにExpoから新規アプリを作成してみましょう。
snack.expo

まず、App.js の Card の中身を一旦消しましょう。
そして右側にある TextInput コンポーネントをrender()の中にドラッグ&ドロップしましょう。

すると、以下のようにコードが変わるはずです。

import React, { Component } from 'react';
import { Text, View, StyleSheet, TextInput } from 'react-native';
import { Constants } from 'expo';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-elements'; // 0.18.5
export default class App extends Component {
state = {
inputValue: "You can change me!"
};
_handleTextChange = inputValue => {
this.setState({ inputValue });
};
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone!
Save to get a shareable url.
</Text>
<TextInput
value={this.state.inputValue}
onChangeText={this._handleTextChange}
style={{ width: 200, height: 44, padding: 8 }}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: '#34495e',
},
});

また、画面はこのようになります。

You can change me! とある部分はテキスト入力が可能となっています。

では、何が起きているのかソースコードを見てみましょう。

<TextInput
value={this.state.inputValue}
onChangeText={this._handleTextChange}
style={{ width: 200, height: 44, padding: 8 }}
/>

TextInputとはテキストフィールドを出力するコンポーネントです。

value={this.state.inputValue}
こちらはvalue属性(表示する値)に、this.state.inputValue を設定しています。
this.state.inputValueについては、このコンポーネントのstateに設定されたinputValueを出力しています。
このstateがどこから来たものかは後ほど説明します。

そして次の onChangeText={this._handleTextChange} です。
これは「onChangeTextイベントが発動したときにこのコンポーネントの_handleTextChangeイベントを発動してね!」という指定です。
次のstyle は特に解説する必要もない為、この_handleTextChange について見ていきましょう。
this、つまりこのコンポーネント内にこのメソッドがあるはずなので探してみましょう。

探してみると、上のほうにstateの設定も含めこのような記載がありました。

  state = {
inputValue: "You can change me!"
};
_handleTextChange = inputValue => {
this.setState({ inputValue });
};

まず、state の設定をしている箇所について見ていきます。
inputValue に「You can change me!」を設定していますね。
これは言わば初期化処理です。このコンポーネントが呼び出されたらstateinputValueに値を設定しています。

ちょっと一言

このように明示的にconstructor を定義することも多いです。

  constructor(props) {
super(props);
this.state = { inputValue: 'You can change me!' };
}

そして次に_handleTextChange メソッドの部分を確認します。

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

こちらはアロー関数と呼ばれる関数です。
関数リテラル(変数に関数を代入する方法)をよりシンプルにかける関数です。
先程のメソッドですが、従来ですとこのような書き方になります。
慣れている方はこちらのほうが、ピンとくるかもしれません。
つまり、このメソッドではthis.setStatestateinputValueを設定して返す、という処理をしています。

_handleTextChange = function(inputValue) { 
return this.setState(inputValue)
}.bind(this)

POINT!!

ES6の書き方にまだ慣れない!という方も多いと思います。生のJavaScriptではまだブラウザサポートされていないですし、必要性を感じない方も多いのではないでしょうか。
それでも、Babelなどのトランスパイラ(JavaScriptのバージョンを吸収しブラウザが理解できる形に変換してくれる)は多くのプロジェクトに使用されていますし、ぜひ使いながら覚えていくようにしてください。

ちょっと一言

必ずsetStateから更新しましょう!

ちなみに、stateの値を初期値のように直接更新するのではなく、なぜsetStateから更新しているのでしょうか。
実はsetStateが呼ばれることで部分的に再描画されます。stateを直接更新してもこの再描画はされない為、this.stateの値はImmutable(不変)にしておかないといけないのです。

stateの値を別の場所でも表示させてみる

最後に、入力値がリアルタイムで更新される感を出す為、Text 部分をこのように変えてみましょう。

        <Text style={styles.paragraph}>
{this.state.inputValue}
</Text>

すると、このようにリアルタイムでstateinputValueが更新されることがわかるかと思います。

まとめ

今回はTextInputコンポーネントのご紹介と、そこからのイベント発動、またstateの更新などについて解説しました。
stateとレンダリングについてはReactにおいては非常に重要な考え方ですので、覚えておくようにしましょう。

Author Profile

eishis
eishis
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。
マーケター・ディレクター・エンジニアなど何でも屋。
COBOLからReactまで色んなことやります。

この記事は
参考になりましたか?

PAGE TOP