Question

我有一个Modal对话框组件，该组件将另一个组件作为内容并返回处理结果的承诺（想法来自here）。如何从内容中提取“时间”状态以将其添加到承诺链？

 import React from 'react'
    import Modal from './Modal'

    class Late extends React.Component {

        constructor(props) {

            super(props);

            this.state = {
                time: '18:48'
            };
          }

        render() {

          return (
            <div className='modal-body'>
                {this.time}
            </div>
          );
        }
      }

    export default function(message, options) {

        var form = <Late description={options.description} />;

        return Modal(form, message, options).then(() => ??);
    }

import React from 'react'
import ReactDOM from 'react-dom'
import '../css/modal.css'
import Promise from 'bluebird'
import _ from 'lodash'

Promise.config({ cancellation: true });

class Modal extends React.Component {

    constructor(props) {

        super(props);

        this.resolve = null;
      }

    abort = () => this.promise.cancel();
    confirm = () => this.resolve();

    componentDidMount() {

        this.promise = new Promise(resolve => this.resolve = resolve);

        return ReactDOM.findDOMNode(this.refs.confirm).focus();
    }

    backdrop = () => <div className='modal-backdrop in' />;

    modal() {

      var style = {display: 'block'};

      return (
        <div
          className='modal in'
          tabIndex='-1'
          role='dialog'
          aria-hidden='false'
          ref='modal'
          style={style}
        >
            <div className='modal-dialog'>
                <div className='modal-content'>
                    <div className='modal-header'>
                        <h4 className='modal-title'>
                            {this.props.message}
                        </h4>
                    </div>
                    {this.props.children}
                    <div className='modal-footer'>
                        <div className='text-right'>
                            <button type='button' className='btn btn-default' onClick={this.abort} >
                                {this.props.abortLabel}
                            </button>
                            {' '}
                            <button type='button' className='btn btn-primary' ref='confirm' onClick={this.confirm} >
                                {this.props.confirmLabel}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>);
    }

    render() {
      return (
        <div>
          {this.backdrop()}
          {this.modal()}
        </div>
      );
    }
  }

  export default function(content, message, options) {

    var cleanup, component, props, wrapper;

    if (options == null) {

      options = {};
    }

    props = _.assign({

      message: message
    }, options);

    wrapper = document.body.appendChild(document.createElement('div'));

    component = ReactDOM.render(<Modal {...props}>{content}</Modal>, wrapper);

    cleanup = function() {

      ReactDOM.unmountComponentAtNode(wrapper);

      return setTimeout(function() {

        return wrapper.remove();
      });
    };

    return component.promise.finally(cleanup);
  };

Answer 1

如果我正确理解您的意思，您希望在模态完成后立即采取一些措施（按OK，即按）。如果是这样，那么您可以用组件包装Modal并将函数作为道具传递给Modal，这样，一旦Modal组件处理了所需的动作，它就可以从prop中省略该函数。 take a look how to pass a function as a prop和Lift up the state

如何从组件检索状态

1 个答案: