如何在键盘打开时隐藏浮动按钮（Android/iOS）？

Question

我的网站上有一个使用 Reactjs 构建的浮动按钮。每当我在手机上打开键盘时，我都想隐藏那个按钮。

Answer 1

当某些输入被聚焦时，键盘被打开。所以你可以用onFocus事件处理它

onFocus = () => {
    this.setState({hiddenButton: true})
}
onBlur = () => {
    this.setState({hiddenButton: false})
}

render() {
    <React.Fragment>    
        {!this.state.hiddenButton ? <button>Click here</button> : null }
        <input 
            type='text'
            onFocus={ this.onFocus } 
            onBlur={ this.onBlur } 
            placeholder="Enter your text here."
        />
    <React.Fragment>
}

onBlur 事件在您离开输入时触发

希望对你有帮助