Javascript 长时间鼠标单击时渲染组件

我试图在长时间的鼠标点击上渲染一个模态组件。如果我只是尝试触发一个警报，它会起作用，但渲染似乎不起作用。我想如果我必须回去的话？不太清楚。我创建了一个功能

handlebutton press down

来执行此任务，并创建了

handlebutton release

来在用户决定不执行此操作时清除间隔

export class Dropdown extends React.Component<IProps> {
  buttonPressTimer: any;
  constructor(props: IProps) {
    super(props);
    this.handleButtonPress = this.handleButtonPress.bind(this);
    this.handleButtonRelease = this.handleButtonRelease.bind(this);
  }

  public render() {

    return (
      <div style={{ alignSelf: "center" }}>
        <ul className="nav nav-pills">
          {filteredProbes.length === 0 ? (
            <li className="nav-item dropdown ">
              <div
                className="dropdown-menu show"
                x-placement="bottom-start"
                style={{
                  display: "none"
                }}
              ></div>
            </li>
          ) : (
            <li className="nav-item dropdown ">
              <div
                className="dropdown-menu show"
                x-placement="bottom-start"
                style={{
                  position: "relative",
                  willChange: "transform",
                  top: "5px",
                  overflowY: "scroll",
                  maxHeight: "200px",
                  color: "white"
                }}
              >
                {this.props.searchState.isActive === false
                  ? probes.map(probe => (
                      <a
                        onClick={() => this.props.onUpdateSelectedProbe(probe)}
                        className="dropdown-item"
                        onMouseDown={this.handleButtonPress}
                        onMouseUp={this.handleButtonRelease}
                      >
                        <div
                          className="dropdown-divider"
                          style={{ backgroundColor: "black" }}
                        ></div>
                        {probe.companyPN}: {probe.description}
                      </a>
                    ))
                  : filteredProbes.map(filterprobe => (
                      <a
                        onClick={() =>
                          this.props.onUpdateSelectedProbe(filterprobe)
                        }
                        className="dropdown-item"
                      >
                        <div className="dropdown-divider"></div>
                        {filterprobe.companyPN}: {filterprobe.description}
                      </a>
                    ))}
              </div>
            </li>
          )}
        </ul>
      </div>
    );
  }

  handleButtonPress() {
    this.buttonPressTimer = setTimeout(() => {
      {/* Show the modal if showModal is true */}
      this.props.modalState.showModal && (
        <WedgeGroup
          wedgeState={this.props.wedgeState}
          onUpdateSelectedWedge={this.props.onUpdateSelectedWedge}
          onUpdateShowModal={this.props.onUpdateShowModal}
          onUpdateHideModal={this.props.onUpdateHideModal}
          modalState={this.props.modalState}
        />
      );
    }, 1000);
  }
  handleButtonRelease() {
    clearTimeout(this.buttonPressTimer);
  }
}

导出类下拉列表扩展了React.Component{
按钮按下计时器：任何；
建造师（道具：IProps）{
超级（道具）；
this.handleButtonPress=this.handleButtonPress.bind（this）；
this.handleButtonRelease=this.handleButtonRelease.bind（this）；
}
公共渲染（）{
返回(

{filteredProbes.length==0(


) : (

{this.props.searchState.isActive==false
？probe.map（probe=>(
this.props.onUpdateSelectedProbe（probe）}
className=“下拉项”
onMouseDown={this.handleButtonPress}
onMouseUp={this.handleButtonRelease}
>
{probe.companyPN}:{probe.description}
))
：filteredProbes.map（filterprobe=>(
this.props.onUpdateSelectedProbe（filterprobe）
}
className=“下拉项”
>
{filterprobe.companyPN}:{filterprobe.description}
))}

)}

);
}
车把钮扣压力机（）{
this.buttonPressTimer=setTimeout（（）=>{
{/*如果showmodel为true，则显示模式*/}
this.props.modalState.showmodel&&(
);
}, 1000);
}
把手按钮释放装置（）{
clearTimeout（此.buttonPressTimer）；
}
}

您需要将

设置超时

中的代码移动到

渲染

功能，并使用

状态

渲染

楔块

：

export class Dropdown extends React.Component<IProps> {
    ...
    constructor(props: IProps) {
        super(props);
        this.state = {
            showModal: false
        };
        ...
    }

    public render() {
        const showModal = this.props.modalState.showModal &&
            this.state.showModal;

        return (
            <div style={{ alignSelf: "center" }}>
                {
                    showModal && (
                        <WedgeGroup
                            wedgeState={this.props.wedgeState}
                            onUpdateSelectedWedge={this.props.onUpdateSelectedWedge}
                            onUpdateShowModal={this.props.onUpdateShowModal}
                            onUpdateHideModal={this.props.onUpdateHideModal}
                            modalState={this.props.modalState}
                        />
                    );
                }

                //..... render other components
            </div>
        );
    }

    handleButtonPress() {
        this.buttonPressTimer = setTimeout(() => {
            this.setState({
                showModal: true
            })
        }, 1000);
    }
    handleButtonRelease() {
        clearTimeout(this.buttonPressTimer);
    }
}

导出类下拉列表扩展了React.Component{
...
建造师（道具：IProps）{
超级（道具）；
此.state={
showModal:错误
};
...
}
公共渲染（）{
const showModal=this.props.modalState.showModal&&
this.state.showmodel；
返回(
{
showModal&(
);
}
//…渲染其他组件
);
}
车把钮扣压力机（）{
this.buttonPressTimer=setTimeout（（）=>{
这是我的国家({
showModal：对
})
}, 1000);
}
把手按钮释放装置（）{
clearTimeout（此.buttonPressTimer）；
}
}

它不会首先渲染，因为您没有触发任何使React渲染的机制。 我建议您从setTimeout中删除此组件，将其放置在渲染中（应该在的位置）。 最后操纵组件状态以显示或隐藏模态。 如果您触发计时器显示模式视图，它将仅在状态更改后显示，因此在您的情况下，需要1s才能向用户显示可能没有响应的内容

// inside your handleButtonPress()
this.setState({
    showModal: true
}}

---

对于用户来说，什么时候的响应时间会更快呢？这是一个非常好的例子。