长时间单击鼠标即可呈现组件

Posted 2021-04-26

我试图通过长时间单击鼠标来渲染模态组件。如果我只是尝试触发警报，它可以工作，但是渲染似乎并不能解决问题。我假设也许我必须返回吗？不太确定。我创建了一个函数handleButtonPressDown来执行此任务，并创建了一个handleButtonRelease来清除间隔，以便用户决定不执行此操作。

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);
  }
}

答案

您需要将setTimeout中包含的代码移至render函数，并使用state呈现WedgeGroup：

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);
    }
}