常用的 React Native 的基礎元件基本上都快介紹完了呢，TextInput 是能讓使用者輸入文字的元件，輸入進 App 後，我們會需要把輸入的字串存起來，所以今天也會簡單的介紹到 React 的 State，負責儲存 Component 之中的狀態的東西。

TextInput

import SOP: import { TextInput } form react-native;
使用範例：

<TextInput
  onChangeText={(text) => this.setState({text})}
  value={this.state.text}
/>

我們可以看到有兩個比較主要的 prop，分別是 onChangeText 跟 value，onChangeText 這個 prop 可以在輸入的時候觸發，然後我們用 setState 把輸入的文字存進去 state 裡面，然後 value 這個 prop 就是負責把輸入的東西顯示在上面的，來一個完整的範例

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

export default class TextInputSample extends Component {
  constructor(props) {
    super(props);
    this.state = { text: 'Useless Placeholder' };
  }

  render() {
    return (
      <View style={styles.center}>
        <Text style={styles.textCenter}>{this.state.text}</Text>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  textCenter: {
    color: 'black',
    fontSize: 40,
    padding: 20,
  }
});

執行結果:

我們可以觀察到喔 setState 只要觸發，他就會重新 render 修改 的內容，這個其實就是 React data binding 的好處，不用再重新的修改顯示內容。

有問題歡迎來 React Native Taiwan 問喔
創科資訊