Question

我对如何将自定义函数附加到我传递给名为handleSaveAction的模态的道具的方式感到困惑，如下所示。我想允许任何调用该组件的人能够传递自定义保存功能，具体取决于需要保存的内容。单击“保存按钮”时，我想调用正在传入的handleSaveAction以及使用closeModal触发模式以便立即关闭。我怎么能以简单的方式做到这一点？

import ReactCSSTransitionGroup from 'react-addons-css-transition-group';

const UiModal = React.createClass({
    getInitialState(){
      return { isOpen: false };
    },

    openModal() {
        this.setState({ isOpen: true });
    },

    closeModal() {
        this.setState({ isOpen: false });
    },

    render() {
        const { openBtnText, header, subHeader, body, footer, footerText, actionBtnText='See More', closeBtnText='Cancel', placement='central-small', handleSaveAction } = this.props;

        return (
          <div>
            <div className="button" onClick={this.openModal}>{ this.props.openBtnText }</div>
            <div>
            <ReactCSSTransitionGroup transitionName="modal-anim" transitionLeaveTimeout={500} transitionEnterTimeout={500} transitionAppear={true}
            transitionAppearTimeout={500}>
            { this.state.isOpen ? 
            <div className={`ui-modal-${placement}`} key={placement}>
              <div className="ui-modal-header">
                <UiHeader
                  textTitle={'UiModal Header'}
                  rightSideContent={<UiIcon icon='cancel' dimensions={[18, 18]} color='header-gray' onClick={this.closeModal} />}
                />
                </div>
                <div className="ui-modal-body">
                  {body}
                </div>
              <div className="ui-modal-footer">
                <div className="ui-modal-footer-button-group">
                  <div className="ui-modal-footer-button-close" onClick={this.closeModal}>{closeBtnText}</div>
                  <div className="ui-modal-footer-button button" onClick={this.handleSave}>{actionBtnText}</div>
                </div>
                <div className="ui-modal-footer-text">{footerText}</div>
              </div>
            </div>
            : null }
            </ReactCSSTransitionGroup>
          </div>
          </div>
        );
    }
});

export default UiModal;

Answer 1

您可以在传入函数之前向您的类添加handleSave函数。在该函数中，检查函数是否已通过并在调用this.closeModal()之前调用该函数。类似的东西：

handleSave() {
  if (this.props.handleSaveAction) {
    this.props.handleSaveAction
  }
  this.closeModal();
}

然后点击按钮：onClick={this.handleSave.bind(this)}。

此外，不值得同意，React.createClass()和react-addons-css-transition-group都已弃用，可能值得更新您的React版本并使用ES6类。

添加自定义保存功能以响应模态页脚按钮以处理自定义保存操作并触发关闭

1 个答案: