学习react的实例2--全选

àì夳堔傛蜴生んèń 2022-06-08 09:21 112阅读 0赞

1.效果图：

![20170921112721385][]

2.下面是整篇代码：

var Row = React.createClass({
      getInitialState: function() {
        return {
          checked: false
        };
      },
      checkIt: function() {
        this.props.callback(this.props.index, !this.props.checked);
        return;
      },
      render: function() {
     
        return (
          <tr>
            <td><input type="checkbox" checked={this.props.checked} onChange={this.checkIt} /></td>
            <td>{this.props.obj.foo}</td>
          </tr>
        );
      }
    });
    
    var Table = React.createClass({
      getInitialState: function() {
        var rowState =[];
        for(var i = 0; i < this.props.rows.length; i++) {
          rowState[i] = false;
        }
        return {
          checkAll: false,
          rowState:rowState
        };
      },
      checkRow: function (id,value) {
        this.state.rowState[id] = value;
        if (this.state.checkAll) {
          this.state.checkAll = !this.state.checkAll;
        }
        this.setState({
          rowState: this.state.rowState,
          checkAll: this.state.checkAll
        });
      },
      checkAll: function () {
        var rowState =[];
        var checkState = !this.state.checkAll;
        for(var i = 0; i < this.state.rowState.length; i++) {
          rowState[i] = checkState;
        }
     
        this.state.checkAll = checkState;
     
        this.setState({
          rowState: rowState,
          checkAll: this.state.checkAll
        });
      },
      render: function() {
        var self = this;
     
        var rows = _.map(this.props.rows, function( row,index) {
          return (<Row obj={row} index={index} key={row.id} checked={self.state.rowState[index]} callback={self.checkRow} />);
        });
        return (
          <div className="table-holder container">
            <input type="checkbox" checked={this.state.checkAll} onChange={this.checkAll} />
            <table className="table">{rows}</table>
          </div>
        );
      }
    });
    
        var rows = [
          {
            'id' : 1,
            'foo': 'bar'
          },
          {
            'id' : 2,
            'foo': 'baarrrr'
          },
          {
            'id' : 3,
            'foo': 'baz'
          }
        ];
     
    React.render(<Table rows={rows}/>, document.getElementById('container'));

[20170921112721385]: /images/20220608/f75cf1c6c5564f66881a09f7d57fc420.png

发表评论取消回复

表情：

评论列表（有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript--全选、取消全选、反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

快来打我*/ 2022年09月21日 13:26/ 0 赞/ 189 阅读

相关 Dom 全选全不选反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

桃扇骨/ 2022年06月11日 00:06/ 0 赞/ 238 阅读

相关学习react的实例2--全选

1.效果图： ![20170921112721385][] 2.下面是整篇代码： var Row = React.createClass({ g

àì夳堔傛蜴生んèń/ 2022年06月08日 09:21/ 0 赞/ 113 阅读

相关全选取消全选

这里用到AngularJS四大特性之二----双向数据绑定注意：没写一行DOM代码！这就是ng的优点，bootstrap.css为了布局，JS代码也只是简单创建ng模块和n

爱被打了一巴掌/ 2022年06月04日 07:55/ 0 赞/ 229 阅读

相关 jquery 复选框全选、取消全选、全选按钮在未全选状态不选

代码： <input type="checkbox" name="chooseAll" οnclick="checkAll()">全选 <input type

系统管理员/ 2022年06月02日 04:27/ 0 赞/ 293 阅读

相关 React（2）React的嵌套和组件实例

3、嵌套被嵌套的目标可以是函数或者类，需要以大写字母开头：函数是 `return` 的返回值，类是 `render` 函数的返回值；示例： // 被嵌

不念不忘少年蓝@/ 2022年05月31日 06:37/ 0 赞/ 242 阅读

相关点餐选择框实例（全选、反选的运用）

/需求分析：（1）点击上方选择框，让下方所有选择框状态与上方选择框一致（2）点击下方选择框如果所有的选择框都是选中状态，上方选择

末蓝、/ 2022年05月16日 08:09/ 0 赞/ 104 阅读

相关 js全选/全不选/反选

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

迷南。/ 2022年05月13日 10:08/ 0 赞/ 242 阅读

相关 JavaScript专题实例学习一全选全不选择反选

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <he

缺乏、安全感/ 2022年05月09日 22:03/ 0 赞/ 168 阅读

相关全选-反选-全不选

简单易懂，上手快 $(function() \{ //全选 $("\all").click(function()

绝地灬酷狼/ 2021年10月03日 02:48/ 0 赞/ 493 阅读