学习react的实例2--全选

àì夳堔傛蜴生んèń 2022-06-08 09:21 137阅读 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 条评论，137人围观）

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

相关阅读

相关 React学习2

目录 1.React原理 1.1 setState 推荐语法 setState的第二个参数 1.2 JSX的转化原理 1.3 组件更新机制 1.4 组件

系统管理员/ 2023年10月03日 12:04/ 0 赞/ 31 阅读

相关 2.21-练习：全选&反选

选择框功能实现，全选和反选 <!DOCTYPE html> <html lang="en"> <head> <meta charset

矫情吗；*/ 2023年07月07日 11:06/ 0 赞/ 82 阅读

相关 react+ts+antd实现全选/反选操作

最近在项目中遇到这样一个需求，在list中模拟全选/反选操作，总结以下三个关键步骤： 1. 给list中每一个元素定义一个checked变量，控制当前元素是否勾选； 2.

小灰灰/ 2023年02月25日 10:09/ 0 赞/ 65 阅读

相关 vue2.0 实现全选和全不选

vue2.0 实现全选和全不选实现思路： 1、 v-model 一个收集所有input（除全选框外）数组checkModel ，vue会动态将其checked为t

r囧r小猫/ 2023年02月22日 05:22/ 0 赞/ 96 阅读

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

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

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

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

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

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

相关全选取消全选

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

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

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

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

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

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

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

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

相关全选-反选-全不选

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

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