javascript - React datepicker hide on click outside broken -
i'm trying update react component based on array in controller.in controller i'm doing merge on diaries , change content , can't update view in react component.can explain me how can update react state controller??thank !
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 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; } } });
my react component...
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> ); } });
and html ....
body ng-app="app" ng-controller="mainctrl 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>
Comments
Post a Comment