React Native之TextInput组件解析示例(3)

属性名 取值 说明
clearButtonMode   enum(‘never', ‘while-editing', ‘unless-editing', ‘always')   何时在文本框右侧显示清除按钮  
clearTextOnFocus   bool   如果为true,每次开始输入的时候都会清除文本框的内容  
keyboardAppearance   enum(‘default', ‘light', ‘dark')   键盘的颜色  
onKeyPress   function   一个键被按下的时候调用此回调,传递给回调函数的参数为{ nativeEvent: { key: keyValue } }  
spellCheck   bool   如果为false,则禁用拼写检查的样式(比如红色下划线)  
enablesReturnKeyAutomatically   bool   如果为true,键盘会在文本框内没有文字的时候禁用确认按钮 ,默认值为false  

3 方法

clear()

clear用于清空输入框的内容。

想要使用组件的方法则需要使用组件的引用,例子如下所示。

... render() { return ( <View style={styles.container}> <View style={styles.searchBar}> <TextInput style={styles.input} ref="textInputRefer" placeholder='请输入内容' blurOnSubmit={true} returnKeyType='send' onChangeText={(text) => { this.setState({searchText: text}); }} /> <Button style={styles.button} title='清除' onPress={ () => { this.refs.textInputRefer.clear(); } }/> </View> </View> ); } ...

在TextInput标签中定义引用的名称:ref="textInputRefer",这样我们通过 this.refs.textInputRefer就可以得到TextInput 组件的引用。在Button的onPress函数中,调用了TextInput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。

isFocused(): boolean

返回值表明当前输入框是否获得了焦点。

好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wygpxz.html