Закрытие модального режима путем передачи состояния между компонентами - PullRequest
Новая
       20

Закрытие модального режима путем передачи состояния между компонентами

1 голос
/ 27 сентября 2019

В настоящее время у меня есть модальное окно, которое открывается при нажатии ListItem внутри ListGroup.tsx, однако, когда я пытаюсь передать состояние модального состояния моему компоненту TestGroup, чтобы закрыть модальное устройство, оно не выполняет ожидаемое поведение.

Я думал о том, чтобы визуализировать ListGroup.tsx после нажатия кнопки закрытия внутри TestGroup.tsx, но я не уверен, что это имеет смысл.Поскольку this.props.onUpdateModal(false); должен закрывать модальные, если я что-то упускаю.

Весь предоставленный код является фрагментом кода, а не полным кодом.

Это мой ListGroup.tsx 

interface IProps {
  onUpdateModal: typeof UpdateModal;
  showModalState: boolean;
}

export class ListGroup extends React.Component<IProps> {
  public render() {
    return (
      <div>
        <ul
          className="list-group"
          style={{
            display: "inline-block",
            marginTop: "20px"
          }}
        >
          {filterTest.map(filterTest => (
            <li
              key={filterTest.companyPN + "-" + filterTest.rev}
              className="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
              onClick={() => {
                this.props.onUpdateSelectedTest(filterTest);
                this.props.onUpdateModal(true);
              }}
            >
              {filterTest.companyPN}: {filterTest.description}
            </li>
          ))}
        </ul>
        {/* Show the modal if showModal is true */}
        {this.props.showModalState && (
          <TestGroup
            onUpdateModal={this.props.onUpdateModal}
            showModalState={this.props.showModalState}
          />
        )}
      </div>
    );
  }
}

Это мой TestGroup.tsx 

interface IProps {

  onUpdateModal: typeof UpdateModal;
  showModalState: boolean;
}

export class WedgeGroup extends React.Component<IProps> {
  public render() {
    return (
      <div>
        <div className="modal" style={{ display: "inline-block" }}>
          <div className="modal-dialog" role="document">
            {selectedtest.map(selecttest => (
              <div className="modal-content">
                <div className="modal-header">
                  <h5 className="modal-title">test</h5>
                  <button
                    onClick={() => {
                      this.props.onUpdateModal(false);
                    }}
                    type="button"
                    className="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>

                <div className="modal-body">
                  <p>{selecttest.description}</p>
                </div>
                {/* Close the modal if showModal is false */}
                <div className="modal-footer">
                  <button
                    onClick={() => {
                      this.props.onUpdateModal(false);
                    }}
                    type="button"
                    className="btn btn-secondary"
                    data-dismiss="modal"
                  >
                    Close
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }
}

export default TestGroup;

Это мой ModalReducer.ts 

import { ModalActionTypes, SHOW_MODAL } from "../actions/ModalTypes";

const initialState: boolean = false;

export function modalReducer(state = initialState, action: ModalActionTypes) {
  switch (action.type) {
    case SHOW_MODAL:
      return {
        showModal: action.payload
      };
    default:
      return state;
  }
}

Это мой ModalActions.ts 

import { SHOW_MODAL, ModalActionTypes } from "./ModalTypes";

export function UpdateModal(modal: boolean): ModalActionTypes {
  return {
    type: SHOW_MODAL,
    payload: modal
  };
}

Это мой ModalTypes.ts 

export const SHOW_MODAL = "SHOW_MODAL";

interface ShowModal {
  type: typeof SHOW_MODAL;
  payload: boolean;
}

export type ModalActionTypes = ShowModal;

1 Ответ

0 голосов
/ 27 сентября 2019

Я добавил еще одно действие, чтобы скрыть модал, и это решило проблему.

...