react native中软键盘收起时使输入框失去焦点

问题描述
在TextInput中输入文本 ,会弹出软键盘 ,当我收回软键盘时框焦点还在这个输入框中。
分析:
需要监听键盘的收起事件,然后控制输入框,使输入框失去焦点
代码:

export default class InputItem extends Component {

  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      this._keyboardDidHide,
    );
  }

  componentWillUnmount() {//当组件移除时,取消监听
    this.keyboardDidHideListener.remove();
  }
  _keyboardDidHide = () => {//键盘收起
    this.inputRef.current.blur();//使输入框失去焦点
  };

  render() {
    return (
          <TextInput
           ref={this.inputRef}
            onSubmitEditing={Keyboard.dismiss}//当结束编辑后,点击键盘的提交按钮时触发事件
            value={this.state.value}
          />
    );
  }
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值