すべてのチェックボックスを反応&&角度でチェックする

私はチェックボックスのすべての機能をチェックするようにしていますが、それを行うことはできません。すべてのチェックボックスを反応&&角度でチェックする

var FormattedDate = ReactIntl.FormattedDate; 
var DiaryTable = React.createClass({ 
    getInitialState: function() { 
     return { 
      items : this.props.item, 
      globalChecked: false 
     }; 
    }, 
    changeSelection:function (i) { 
     var state = this.state.items.map(function (element) { 
      return { 
      start:element.start, 
       end:element.end, 
       hours:element.hours, 
       selected:(element === this.state.items[i] ? !element.selected:element.selected) 
      }; 
     }); 
    }, 
    render: function(){ 
     var arrayItems = this.state.items.map(function (item,i) { 
      return (
       <tr key={i}> 
        <td><input type="checkbox" checked={item.selected} onChange={this.changeSelection(i).bind(this)}/></td> 
        <td><FormattedDate value={item.start}/></td> 
        <td><FormattedDate value={item.end}/></td> 
        <td>{item.hours}</td> 
        <td> 
         <button className="editButton"></button> 
        </td> 
        <td> 
         {this.state.items[i].selected} 
        </td> 
       </tr> 
      ); 
     }.bind(this)); 

     return (
       <table className="myTable"> 
        <thead> 
        <tr> 
        <th><input type="checkbox"/></th> 
        <th>Start Date:</th> 
        <th>End Date:</th> 
        <th id="hoursField">Hours:</th> 
        <th id="editField">Edit:</th> 
         <th>selected:</th> 
        </tr> 
        </thead> 
        <tbody> 
        {arrayItems} 
        </tbody> 
        <tfoot> 
        <tr> 
        <td colSpan="4"> 
         <button className="myButton" id="addPeriodButton">Add period</button> 
         <button className="myButton">Remove period</button> 
         <button className="myButton">Set result from merge</button> 
        </td> 
         </tr> 
        </tfoot> 
       </table> 
     ); 
    } 
});

私は私のコントローラからデータを取って、」：

app.controller('MainCtrl', function ($scope) { 
     $scope.resultProps = { 
      item:[] 
     } 
     $scope.firstArrayProps = { 
      item:[{start:new Date(),end:22,hours:3,selected:false},{start:22,end:33,hours:44,selected:false}] 
     } 
     $scope.secondArrayProps = { 
      item:[{start:22,end:33,hours:44,selected:false}] 
     } 
..... more code here

とのindex.html ..

<body ng-app="app" ng-controller="MainCtrl as mainCtrl"> 
<!--<div id="diaryWrapper">--> 
<!--&lt;!&ndash;<diary-template props="firstArrayProps" result="resultProps" ></diary-template>&ndash;&gt;--> 
    <!--&lt;!&ndash;<div class="mergeWrapper">&ndash;&gt;--> 
    <!--&lt;!&ndash;<button class="myButton" id="mergeButton" ng-click="runMerge()">Merge diaries</button>&ndash;&gt;--> 
    <!--&lt;!&ndash;</div>&ndash;&gt;--> 
<!--&lt;!&ndash;<diary-template props="secondArrayProps" result="resultProps" ></diary-template>&ndash;&gt;--> 
<!--</div>--> 
<div class="tableWrapper"> 
<react-component name="DiaryTable" props="firstArrayProps" /> 
</div> 

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

私は他の何か間違ったことをやっている場合は私に教えて気軽にお問い合わせください。ありがとうございました！

出典

2016-08-04 Йосиф Михайлов

は、それはあなたがchangeSelection関数が何を願っていますか？何も返さず、あなたがしてはいけないsetStateを使わずに状態を変更しようとしているようです。 –

私はsetStateを実装しようとしていましたが、エラーが発生しました：項目は定義されていません?? –

どの時点でそれを取得できますか？ –

handleSelectAllのコードは次のようになります。

handleSelectAll: function(e) { 
    var items = this.state.items.slice(); 
    items.forEach(function(item) { 
    item.selected: e.target.checked, 
    }); 
    this.setState({ items: items }); 
}

出典

2016-08-04 15:10:31 vijayst

すべてのチェックボックスを反応&&角度でチェックする

答えて

関連する問題