Question

我需要一种方法来定义语义模式上的行为，该模式在关闭时执行。

我现在所做的是使用“门户网站”，但我认为＆＃34; onClick＆＃34;事件不起作用，因为这些html元素不在反应之中。

我有：

componentDidMount() {
  console.log('mounting modal', this);
  this.node = React.findDOMNode(this);
  this.$modal = $(this.node);

  this.$icon = $("<i class='close icon' /></i>");

  this.$header = $("<div class='header'></div>").html(this.props.header);
  this.$content = $("<div class='content'></div>");

  this.$modal.append(this.$header);
  this.$modal.append(this.$icon);
  this.$modal.append(this.$content);

  this.renderDialogContent(this.props);
}

componentWillReceiveProps(newProps) {
  this.renderDialogContent(newProps);
}

renderDialogContent(props) {
  props = props || this.props;

  React.render(<div>{props.children}</div>, this.$content[0]);

  if (props.isOpen) {
    this.$modal
        .modal('setting', 'closable', false)
        .modal('show');
  }
   else {
  this.$modal.modal('hide modal');
  }
}

如何定义该行为？

Here's a fiddle with some similar code。

Answer 1

出于某种原因，我不确定为什么，你不能在模态视图中使用常规的React事件处理程序。

所以在关闭图标上，我注册了一个jquery onClick处理程序。

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class my_controller extends CI_Controller {


    public function index()
    {
        $this->load->model("my_model");
        $data["result"] = $this->my_model->date_verification();
        $this->load->view('my_view',$data);
    }
}

然后我绑定了父组件。

语义UI模态组件onClose与React

1 个答案: