1.5处理文本输入

处理文本输入：

http://reactnative.cn/docs/0.44/handling-text-input.html#content

这里首先介绍了一个TextInput输入控件，待会代码要多一个import了。然后看onChangeText跟onSubmitEditing，一个是文本变化时候被调用的方法，一个是设备弹出软键盘点提交键时候调用的方法。没啥好说，做好笔记。

然后看看下面这个吃货的例子,沾到工程里试试（或者应该自己敲熟悉一下？）:

看下代码：

给state新加了一个text属性。

render() {

    return (

      <View style={{padding: 10}}> //距离内边距10个像素

        <TextInput

          style={{height: 40}}//输入框的高度40个像素

          placeholder="Type here totranslate!"//这个按照显示的结果来看应该是文本框未输入时的默认提示内容

          onChangeText={(text) => this.setState({text})}

        />

        <Text style={{padding: 10, fontSize:42}}>//距离内边距10，字体大小42

          {this.state.text.split(' ').map((word)=> word && '��').join(' ')}

        </Text>

      </View>

    );

  }

 

然后来看这一句

onChangeText={(text) => this.setState({text})}

这里又有点奇怪，this.setState({text})里面的这个text，明显就是左边传递过来的text，但是他怎么知道去改变state的哪个值，比如

this.state= {text: '', textt:''};

那你是改变哪一个？

经过试验，发现他改变的是text里面的值，也就是说，this.setState({text})其实是一种简略写法，正确写法是this.setState({text:text})。他改变的是与他同名的参数。

再看下一句：

{this.state.text.split(' ').map((word)=> word && '��').join(' ')}

这里明显用的是链式编程。Split是吧以空格为界限，把所有字符串分割成一个个元素放在数组返回；然后调用map，又会将数组里的各个元素依次返回（我感觉类似于for）。然后把元素定义成word，通过word跟颜文字相与（至于为什么我也不知道，知道的麻烦告诉一下我），然后再在每个元素后加一个空格。

这个代码一写感觉用响应式编程跟链式编程好爽啊。每次state的值改变不需要手动地再去setText来改变界面上的值，一整串.xxx.xxx.xx就搞定了原先一堆代码。感觉这个东西是个提升效率神器啊。