美文网首页
rn处理文本输入

rn处理文本输入

作者: 丶Honour | 来源:发表于2018-12-13 16:33 被阅读0次
    import React,{Component} from 'react';
    import {AppRegistry,Text, TextInput,View} from 'react-native';
    
    export default class PizzaTranslator extends Component {
        constructor(props) {
            super(props);
            this.state = {text:''};
        }
    
        render() {
            return (
                <View style={{padding:10,flex:1,justifyContent:'center'}}>
                    <TextInput
                        style={{height:40}}
                        placeholder="Type here to translate!"
                        onChangeText={(text) => this.setState({text})}
                    />
                    <Text style={{padding:10,fontSize:42}}>
                        {this.state.text.split(' ').map((word) => word && '😂').join(' ')}
                    </Text>
                </View>
            );
        }
    }
    

    关于{this.state.text.split(' ').map((word) => word && '😂').join(' ')}这段代码,可以理解为,text文本先根据空格分隔成数组,再通过map方法遍历,其中map((word)=>部分,word是遍历数组的item,=>代表匿名函数,&&则表示符号前的值不为空时,返回&&后的值。
    javascript中,&&和||的用法比较神奇,经常用在对象上,例如a || b,如果a不存在,则返回b。a && b,如果a存在,则返回b,否则返回a。

    相关文章

      网友评论

          本文标题:rn处理文本输入

          本文链接:https://www.haomeiwen.com/subject/dwjbhqtx.html