- 给TextInput添加ref
- 添加外层view点击事件
- 点击事件调用this.refs.textInput1.blur();即可
部分代码如下:
let ZKLTest1 = React.createClass({
getInitialState:function(){
return {
inputedNum:'',
inputedPW:'',
};
},
updateNum:function(newText){
this.setState((state)=>{
return {
inputedNum:newText,
};
});
},
updatePW:function(newText) {
this.setState(()=>{
return {
inputedPW:newText,
};
});
},
_onPressIn() {
console.log("press in");
},
_onPressOut() {
console.log("press out");
},
_onPress() {
console.log("press");
this.refs.textInput1.blur();
this.refs.textInput2.blur();
},
_onLonePress() {
console.log("long press");
},
render() {
return (
<View style={styles.container}>
<TouchableHighlight
style = {styles.touchable}
onPressIn = {this._onPressIn}
onPressOut = {this._onPressOut}
onPress = {this._onPress}
onLongPress = {this._onLonePress} >
<View style = {styles.container} >
<TextInput ref="textInput1" style={[styles.instructions, styles.tiStyle]} placeholder={'请输入手机号'} clearButtonMode={'always'} keyboardType={'numeric'} maxLength={11} onChangeText={(newText)=>this.updateNum(newText)}/>
<Text style={styles.instructions}>您输入的手机号为:{this.state.inputedNum}</Text>
<TextInput ref="textInput2" style={[styles.instructions, styles.tiStyle]} placeholder={'请输入密码'} password={true} onChangeText={(newText)=>this.updatePW(newText)}/>
<Text style={styles.instructions}>确定</Text>
</View>
</TouchableHighlight>
</View>
);
}
});