Javascript 关闭请求在对话框上不起作用

单击图标时，应显示一个带有表单的对话框，以添加选项卡或删除特定选项卡。我对组件使用了reactjs、redux和materialui。 我可以在单击图标时显示对话框，但当我单击“取消”按钮时，对话框无法关闭

我应该如何解决它

这是我的密码

App.js

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
                  max_char: 32,
                  open: false,
                };
    this.handleChange = this.handleChange.bind(this);
    this.handleLogout = this.handleLogout.bind(this);
  }

  handleClose = () => this.setState({ open: false });

  handleOpen = () => this.setState({ open: true });

  render() {
      return (
            <div>
                <Header
                      tab={this.state.tabs}
                      open={this.state.open}
                      handleClose={this.handleClose}
                      handleToggle={this.handleToggle}
                />
                <Content
                    handleOpen={this.handleOpen}
                    handleClose={this.handleClose}
                />
            </div>
      );
  }
}

class Header extends Component {
  render() {
    const tabs = _.map(this.props.tab, (tab) =>
         <span className="tab" key={tab.id}><a href="">{tab.description}</a></span>
    );

    return (
      <div>
        <AppBar
            title={tabs}
            iconElementRight={navigation}
            onLeftIconButtonTouchTap={this.props.handleToggle}
            style={{ background: '#fff' }}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    iconList: state.iconList
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    selectTabIcon
  }, dispatch);
}


const Content = (props) =>
    (
      <div className="content-section">
        <TabDialog />
      </div>
    );

class TabDialog extends Component {
      constructor(props) {
        super(props);
        this.state = {
                      open: false,
                    };
      }

      renderAddTab() {
        const actions = [
          <FlatButton
            label="Cancel"
            primary
            onTouchTap={this.props.createTab.close}
          />,
          <FlatButton
            label="Add Tab"
            primary
            keyboardFocused
            onTouchTap={this.props.createTab.close}
          />,
        ];
        return (
          <div className="device-action">
            <Dialog
                title="Add a Tab"
                actions={actions}
                modal={false}
                open={this.props.createTab.open}
                onRequestClose={this.props.createTab.close}
            >
            <div className="tab-name">
            <TextField
              floatingLabelText="Name"
              floatingLabelStyle={{ color: '#1ab394' }}
              floatingLabelFocusStyle={{ color: '#1db4c2' }}
              underlineStyle={{ borderColor: '#1ab394' }}
            />
            </Dialog>
          </div>
      );
      }

      renderDeleteTab() {
        const actions = [
          <FlatButton
            label="Cancel"
            primary
            onTouchTap={this.props.createTab.close}
          />,
          <FlatButton
            label="Delete"
            primary
            keyboardFocused
            onTouchTap={this.props.createTab.close}
          />,
        ];
        return (
        <div className="tab-action">
          <Dialog
              title="Delete"
              actions={actions}
              modal={false}
              open={this.props.createTab.open}
              onRequestClose={this.props.createTab.close} />
        </div>
      );
      }


      render() {
        const iconSelected = this.props.createTab;
        if (!iconSelected) {
          return (<div>Select</div>);
        }
        if (iconSelected === '1') {
          return (this.renderDeleteTab());
        }
        if (iconSelected === '2') {
          return (this.renderAddTab());
        }
    }
    }

    function mapStateToProps(state) {
      return {
        iconList: state.iconList,
        createTab: state.createTab,
      };
    }

    function mapDispatchToProps(dispatch) {
      return bindActionCreators({
        addTab,
        selectTabIcon
      }, dispatch);
    }

open props接受布尔值，onRequestClose和onTouchTap props接受函数

---

为什么我的代码不起作用？如何克服此问题？

对话框的

onRequestClose

属性采用

函数，而不是
布尔值。因此，您需要在该函数内将
this.props.createTab.open
的值更改为
false
。这样，redux将更改状态，
open
的值将作为
false
传递。这将关闭对话框。
对话框的
onRequestClose
属性
采用
函数
而非
布尔值
。因此，您需要在该函数内将
this.props.createTab.open
的值更改为
false
。这样，redux将更改状态，
open
的值将作为
false
传递。这将关闭对话框。
我找到了解决方案。onRequestClose和onTouchTap都接受函数。他们需要公开承认错误。我失败的原因是我将假值传递给关闭标志，而不是打开标志

现在我已经创建了一个新的action creator，通过将open payload设置为false来传递一个操作来关闭它

export function closeTabIcon() {
  return {
    type: 'CLOSE_ICON',
    open: false
  }
}

reducer will be something like this

   case 'CLOSE_ICON':
     return action.open

现在在OnRequestProps中，我传递了这个.props.closetabIcon。
我找到了解决方案。onRequestClose和onTouchTap都接受函数。他们需要公开承认错误。我失败的原因是我将假值传递给关闭标志，而不是打开标志

现在我已经创建了一个新的action creator，通过将open payload设置为false来传递一个操作来关闭它

export function closeTabIcon() {
  return {
    type: 'CLOSE_ICON',
    open: false
  }
}

reducer will be something like this

   case 'CLOSE_ICON':
     return action.open

现在，在OnRequestProps中，我传递了这个.props.closetabIcon。
你的意思是说我在selectTabIcon函数中将open的值更改为false吗？@milan yup，将值更改为false我将open的值从true更改为false，并且没有更改close的值。然后我将this.props.createTab.open传递给open props，并将this.props.createTab.close传递给onRequestClose props。但是要打开一个对话框，打开道具的值应该是真的。你能解释一下吗？不是这样的。你的意思是说我在selectTabIcon函数中将open的值更改为false吗？@milan yup，将值更改为false我将open的值从true更改为false，并且没有更改close的值。然后我将this.props.createTab.open传递给open props，并将this.props.createTab.close传递给onRequestClose props。但是要打开一个对话框，打开道具的值应该是真的。你能解释一下吗？不是那样的。