React datepicker隐藏在点击外面破碎

Question

我正在尝试根据我的控制器中的数组更新我的反应组件。在控制器中我正在合并日记并更改其内容，我无法更新反应组件中的视图。可以有人解释我如何从控制器更新反应状态？谢谢！

var app = angular.module（'app'，['react']）;

app.controller('MainCtrl', function ($scope) {

    $scope.resultProps = {
        item:[]
    }
    $scope.firstArrayProps =  {
        item:[]
    }
    $scope.secondArrayProps =  {
        item:[]
    }

    $scope.mergeDiariesFunction = function (first,second) {
       .... merge diaries CODE
    }
    $scope.runMerge = function () {

        var first = angular.copy($scope.firstArrayProps.item);
        var second = angular.copy($scope.secondArrayProps.item);
        first = $scope.sortDiaryByStartDate(first);
        second = $scope.sortDiaryByStartDate(second);

        if($scope.firstArrayProps.item.length == 0 && $scope.secondArrayProps.item.length == 0)
        {
            sweetAlert({
                title: "",
                text: "There's no need to merge empty diaries.Please,add periods.",
                type: "warning"
            });
            $scope.resultProps.item = [];
        }
        else {
            $scope.resultProps.item = $scope.mergeDiariesFunction(first, second);
            $scope.showMydirc.show = true;
            $scope.hideBool.show = true;

        }
    }
});

我的反应成分...

var DiaryResult = React.createClass({
    getInitialState: function() {
        return {
            items : this.props.item,
        };
    },
  init:function () {
    this._super.apply(this,arguments);
      if (this.get("props")) {
          this.get('props').set(this.get("resultProps") || "default", this);
      }
  },
    render: function(){
        var arrayItems =  this.state.items.map(function (item,i) {
            return (
                <tr key={i}>
                    <td><FormattedDate value={item.start}/></td>
                    <td><FormattedDate value={item.end}/></td>
                    <td>{item.hours}</td>
                </tr>
            );
        }.bind(this));
        return (
            <table className="resultTable">
                <thead>
                <tr>
                    <th>Start Date:</th>
                    <th>End Date:</th>
                    <th id="hoursField">Hours:</th>
                </tr>
                </thead>
                <tbody>
                {arrayItems}
                </tbody>
                <tfoot>

                </tfoot>
            </table>
        );
    }
});

和我的HTML ......

body  ng-app="app" ng-controller="MainCtrl as mainCtrl">


<div class="tableWrapper">
<react-component name="DiaryTable" props="firstArrayProps" />
</div>

<button class="myButton" id="mergeButton" ng-click="runMerge()">Merge diaries</button>

<div class="tableWrapper">
<react-component name="DiaryTable" props="secondArrayProps" />
</div>

<react-component name="DiaryResult" props="resultProps" />


</body>