Question

当前，我有一个在ListGroup.tsx中单击ListItem时打开的模式，但是当我尝试将模式的状态传递给我的TestGroup组件以关闭模式时，它无法执行预期的行为。

我的想法是在TestGroup.tsx中单击关闭按钮后呈现ListGroup.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;

Answer 1

我添加了另一个隐藏“模态”的动作，它解决了问题。

通过在组件之间传递状态来关闭模态

1 个答案: