Question

当用户没有与其进行互动或者不是用户的关注时，我试图让按钮不再显示。我现在正在项目中使用反应

在桌面设置中，我通过说onmouseleave={this.hideButton}来完成此操作，但我对iPad的处理时间更为艰难。我已经尝试了onTouchCancel={this.hideButton}但是没有幸运。

我看了react documentation并看到了触摸目标列表，但是我没有看到有关如何访问这些属性的任何文档，我是否正在寻找尝试做正确的道路这样吗？

我之前尝试过的是让body元素听取onClick事件并隐藏按钮，如果它显示但是当按钮点击按钮时这不起作用它显示将显示我希望在按钮单击时出现的模态。

我还应该注意this.hideButton只是将布尔值从true更改为false。

有什么建议吗？

注意：这是一个工作项目，我们决定不使用jQuery（不是我的电话）

目前看来是这样的：

toggleLogoutButton() {
    this.setState({
        logoutButtonVisible: this.props.shouldShowLogoutButton
        && !this.state.logoutButtonVisible,
    });
}

logoutButtonAction() {
    this.toggleLogoutButton();
    this.props.showModal();
}

hideLogoutButton() {
    if (this.state.logoutButtonVisible) {
        this.setState({
            logoutButtonVisible: false,
        });
    }
}

render() {
  return(
  <div className="some-style-1" >
  <span 
  className="some-style-2" 
  onClick={this.toggleLogoutButton}>{this.props.text}
  {this.props.shouldShowLogoutButton && this.caretRender()}
  {this.state.logoutButtonVisible &&
      <div className="dropmenu show" 
      onClick={this.logoutButtonAction}
      onMouseLeave={this.hideLogoutButton}
      onTouchEnd={this.hideLogoutButton}>
         Log Out
      </div>}
   </span>
 </div>);
}

Answer 1

请包含更多代码！

为了诊断您的需求，我们需要了解您已经拥有的东西。

首先，改变

onMouseLeave={this.hideButton};

to（假设您的按钮名称为id="button-name"），

$('#button-name').onMouseLeave={this.hide()};

根据您希望按钮显示/隐藏的方式，我不建议您使用此功能。而是将按钮转到disabled=true。如果您隐藏它，它将会消失，onMouseEnter将无法再访问它。

例如，

$('#button-name').onMouseLeave={this.disabled=true;};

话虽如此，隐藏（甚至禁用onMouseLeave上的按钮......）没有多大意义。

隐藏外部div点击按钮

1 个答案:

请包含更多代码！