我如何设置这个模态的切换？

Question

我试图让一个editModal和一个detailsModal在点击时打开。我为模态设置了动作和减速器，这样它就可以存储在全局状态中，并且它可以工作，但是目前模态被设置为自动打开，我无法关闭它们。我相信是我的逻辑出了问题，但好像会比较直接。有谁有什么技巧可以完成这个任务吗？

modalReducer.js

import { OPEN_MODAL } from "../actions/types";

const initialState = {
  modal: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case OPEN_MODAL:
      return {
        ...state,
        modal: false,
      };
    default:
      return state;
  }
}

ClientEditModal.js

import React, { Component } from "react";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Label,
  Input,
} from "reactstrap";
import { connect } from "react-redux";
import { editClient } from "../actions/clientActions";
import { openModal } from "../actions/modalActions";
import PropTypes from "prop-types";

class ClientEditModal extends Component {
  componentDidMount() {
    this.props.editClient();
    this.props.openModal();
  }

  toggle = () => {
    this.setState({
      modal: !this.props.modal,
    });
  };

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmit = (e) => {
    e.preventDefault();

    // Close modal
    this.toggle();
  };

  displayClient = (clients, _id) => {
    return (
      <FormGroup key={_id} timeout={500} classNames="fade">
        <Label for="name"> Name </Label>
        <Input
          type="text"
          name="name"
          id="client"
          value={clients.name}
          onChange={this.onChange}
        ></Input>

        <Label for="email"> Email </Label>
        <Input
          type="text"
          name="email"
          id="client"
          value={clients.email}
          onChange={this.onChange}
        ></Input>

        <Label for="number"> Number </Label>
        <Input
          type="text"
          name="number"
          id="number"
          value={clients.number}
          onChange={this.onChange}
        ></Input>

        <Button color="dark" style={{ marginTop: "2rem" }} block>
          Submit Client Edit
        </Button>
      </FormGroup>
    );
  };

  render() {
    const { clients } = this.props.client;
    return (
      // Split button into separate component
      <div>
        <Button
          color="dark"
          style={{ marginBottom: "2rem", marginLeft: "1rem" }}
          onClick={this.toggle}
        >
          Edit
        </Button>

        <Modal
          isOpen={this.props.modal}
          toggle={this.toggle}
          style={{ padding: "50px" }}
        >
          <ModalHeader toggle={this.toggle}> Edit</ModalHeader>
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              {clients.map(this.displayClient)}
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

ClientEditModal.propTypes = {
  editClient: PropTypes.func.isRequired,
  client: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  client: state.client,
  modal: state.modal,
});

export default connect(mapStateToProps, { editClient, openModal })(
  ClientEditModal
);

modalActions.js

import { OPEN_MODAL } from "./types";

export const openModal = () => {
  return {
    type: OPEN_MODAL,
  };
};

Answer 1

主要的问题是--你的 toggle 职能。!this.props.modal 将反转modal的值，并且该组件始终保持true的值。

所以，有一个选择是保持另一个关闭modal的动作。

请看下面更新的代码片段。

减少器

import { OPEN_MODAL } from "../actions/types";

const initialState = {
  modal: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case OPEN_MODAL:
      return {
        ...state,
        modal: false,
      };
    case CLOSE_MODAL:
      return {
        ...state,
        modal: true,
      };
    default:
      return state;
  }
}

行动

import { OPEN_MODAL } from "./types";

export const openModal = () => {
  return {
    type: OPEN_MODAL,
  };
};
export const closeModal = () => {
  return {
    type: CLOSE_MODAL,
  };
};

客户端Modal.js

import React, { Component } from "react";
import {
  Button,
  Modal,
  ModalHeader,
  ModalBody,
  Form,
  FormGroup,
  Label,
  Input,
} from "reactstrap";
import { connect } from "react-redux";
import { editClient } from "../actions/clientActions";
import { openModal } from "../actions/modalActions";
import PropTypes from "prop-types";

class ClientEditModal extends Component {
  componentDidMount() {
    this.props.editClient();
    this.props.openModal();
  }

  toggle = () => {
    // this.setState({ //<---- setstate is not required as once the state in the store is updated, then the component is re-rendered automatically
    //   modal: !this.props.modal, //<---- once toggle is executed - it is always true
    //});
   this.props.closeModal()
  };

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  onSubmit = (e) => {
    e.preventDefault();

    // Close modal
    this.toggle();
  };

  displayClient = (clients, _id) => {
    return (
      <FormGroup key={_id} timeout={500} classNames="fade">
        <Label for="name"> Name </Label>
        <Input
          type="text"
          name="name"
          id="client"
          value={clients.name}
          onChange={this.onChange}
        ></Input>

        <Label for="email"> Email </Label>
        <Input
          type="text"
          name="email"
          id="client"
          value={clients.email}
          onChange={this.onChange}
        ></Input>

        <Label for="number"> Number </Label>
        <Input
          type="text"
          name="number"
          id="number"
          value={clients.number}
          onChange={this.onChange}
        ></Input>

        <Button color="dark" style={{ marginTop: "2rem" }} block>
          Submit Client Edit
        </Button>
      </FormGroup>
    );
  };

  render() {
    const { clients } = this.props.client;
    return (
      // Split button into separate component
      <div>
        <Button
          color="dark"
          style={{ marginBottom: "2rem", marginLeft: "1rem" }}
          onClick={this.toggle}
        >
          Edit
        </Button>

        <Modal
          isOpen={this.props.modal}
          toggle={this.toggle}
          style={{ padding: "50px" }}
        >
          <ModalHeader toggle={this.toggle}> Edit</ModalHeader>
          <ModalBody>
            <Form onSubmit={this.onSubmit}>
              {clients.map(this.displayClient)}
            </Form>
          </ModalBody>
        </Modal>
      </div>
    );
  }
}

ClientEditModal.propTypes = {
  editClient: PropTypes.func.isRequired,
  client: PropTypes.object.isRequired,
};

const mapStateToProps = (state) => ({
  client: state.client,
  modal: state.modal,
});

export default connect(mapStateToProps, { editClient, openModal, closeModal })(
  ClientEditModal
);