Question

我正在尝试在我的复选框元素上实现检查所有功能，但我无法做到这一点。可以有人帮忙吗？

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>

如果我做错了别的事，请随时告诉我。谢谢！

Answer 1

handleSelectAll的代码应为：

np.delete(A, slice(2, 4))

在react＆amp;＆amp;中实施check all复选框。角

1 个答案: