1. 程式人生 > >React native (5) 處理文字輸入

React native (5) 處理文字輸入

在上面的例子裡,我們把text儲存到state中,因為它會隨著時間變化。

文字輸入方面還有很多其他的東西要處理。比如你可能想要在使用者輸入的時候進行驗證,在React的表單元件中的受限元件一節中有一些詳細的示例(注意react中的onChange對應的是rn中的onChangeText)。此外你還需要看看TextInput的文件。

    constructor(props){
        super(props);

        //定義一個 myText 變數,用來存放輸入框輸入的值
        this.state={myText : ''}
    }

    render(){
        return
( <View style={{padding:10, flex:1}}> <TextInput style={{width:200,height:100}} placeholder="please input data" //在輸入變動的時候,將最新的輸入內容存到state裡面去 onChangeText={(myText) => this.setState({myText})}> </TextInput> //
將值轉換後輸出 <Text>{this.state.myText.split(' ').map((word) => word && '��').join(' ')}</Text> </View> ); }