Компонент рендеринга по длинному щелчку мыши

Question

Я пытаюсь сделать модальный компонент длинным щелчком мыши. Если я просто пытаюсь запустить оповещение, оно работает, но рендеринг, похоже, не помогает. Я предполагаю, может быть, если я должен вернуться? Не совсем уверен. Я создал функцию 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);
  }
}

Answer 1

Вам необходимо переместить код, который есть внутри функции 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);
    }
}

Answer 2

Во-первых, он не будет визуализироваться, потому что вы не запускаете механизм, который делает React-рендеринг. Я бы предложил вам удалить этот компонент из setTimeout, поместить его внутри рендера (где он должен быть). И, наконец, манипулируйте состоянием вашего компонента, чтобы показать или скрыть ваш модальный режим. Если вы активируете таймер для показа модального вида, он появится только после изменения состояния, поэтому в вашем случае для показа пользователю понадобится 1 с, что может показаться невосприимчивым.

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