问题描述
在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}
          />
    );
  }
}
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐