Как мне go настроить этот модальный режим для переключения? - PullRequest
Новая
       117

Как мне go настроить этот модальный режим для переключения?

0 голосов
/ 30 мая 2020

Я пытаюсь получить editModal и detailsModal для открытия по щелчку. Я настроил действия и редукторы для модального окна, чтобы его можно было сохранить в глобальном состоянии, и он работает, но в настоящее время модальные окна настроены на автоматическое открытие, и я не могу их закрыть. Я считаю, что что-то не так с моим logi c, но похоже, что это было бы довольно просто. Есть ли у кого-нибудь советы, как это сделать?

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

модальные Действия. js

import { OPEN_MODAL } from "./types";

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

1 Ответ

0 голосов
/ 30 мая 2020

Основная проблема заключается в том, что ваша toggle функция, !this.props.modal инвертирует значение модального окна, а компонент всегда сохраняет значение true.

Итак, один вариант - сохранить другое действие для закрытия модального окна.

См. Обновленные фрагменты кода ниже.

Редуктор 

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

ClientModal. 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
);
...