React-Native 让TextInput主动失去焦点

  • 给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 (
      
        
        
        "textInput1" style={[styles.instructions, styles.tiStyle]} placeholder={'请输入手机号'} clearButtonMode={'always'} keyboardType={'numeric'} maxLength={11} onChangeText={(newText)=>this.updateNum(newText)}/>
        您输入的手机号为:{this.state.inputedNum}
        "textInput2" style={[styles.instructions, styles.tiStyle]} placeholder={'请输入密码'} password={true} onChangeText={(newText)=>this.updatePW(newText)}/>
        确定
        
        
      
    );
  }
});

你可能感兴趣的:(iOS,react-native)