React Redux模态框自动打开无法关闭，求点击切换实现方案

嘿，我一眼就看到你代码里几个关键问题，正是它们导致模态框自动打开还关不上，咱们一步步来修复：

你的modalReducer里，触发OPEN_MODAL动作时居然把modal设为false，这和咱们要打开模态框的预期完全相反！而且当前的Reducer只能处理单一状态，没法实现切换关闭的逻辑。建议修改成支持打开、关闭和切换的版本：

import { OPEN_MODAL, CLOSE_MODAL, TOGGLE_MODAL } from "../actions/types";
const initialState = { modal: false };

export default function (state = initialState, action) {
  switch (action.type) {
    case OPEN_MODAL:
      return { ...state, modal: true }; // 打开模态框时设为true
    case CLOSE_MODAL:
      return { ...state, modal: false }; // 关闭时设为false
    case TOGGLE_MODAL: // 新增切换逻辑，灵活控制模态框状态
      return { ...state, modal: !state.modal };
    default:
      return state;
  }
}

你在ClientEditModal的componentDidMount里直接调用了this.props.openModal()，这就导致组件一渲染就自动打开模态框，这完全不是咱们要的点击触发效果！赶紧把这行删掉：

componentDidMount() {
  this.props.editClient();
  // this.props.openModal(); 删掉这行！
}

你的模态框状态是存在Redux全局状态里的，所以切换状态时不能用组件自己的this.setState，必须调用Redux的action来更新全局状态。

首先在modalActions.js里新增切换的action：

import { OPEN_MODAL, CLOSE_MODAL, TOGGLE_MODAL } from "./types";
export const openModal = () => ({ type: OPEN_MODAL });
export const closeModal = () => ({ type: CLOSE_MODAL });
export const toggleModal = () => ({ type: TOGGLE_MODAL }); // 新增这个action

然后修改组件里的toggle方法：

toggle = () => {
  this.props.toggleModal(); // 调用Redux的action来切换状态，而非组件自身setState
};

最后别忘了在connect里把新的action加进去：

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

你在displayClient里的邮箱输入框id还是client，和姓名输入框重复了，这会导致HTML语义错误，建议修正：

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

做完这些修改后，你的模态框应该就能正常点击打开、点击关闭了～

内容的提问来源于stack exchange，提问作者Taylor Phelps