使用?检查固定数据表中的所有框？

Question

我在函数checkall中使用jquery来选中/取消选中固定数据表特定列中的所有复选框。我想知道这是否是最好的方法，还是有一种“反应方式”这样做？

'use strict';

var React = require('react/addons');
var Table = require('fixed-data-table').Table;
var Column = require('fixed-data-table').Column;

// Table data as a list of array.
var rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b3', 'c2'],
  ['a3', 'b3', 'c3'],
];

function checkBox(data){
  return (
    <input type="checkbox" value={data} className="kill-checkbox" />
  );
}

function rowGetter(rowIndex) {
  return rows[rowIndex];
}

// Fixed data tables (Facebook) requirement:http://facebook.github.io/fixed-data-table/
require('../../styles/fixed-data-table.css');
var TableTester = React.createClass({
  render: function () {
    return (
      <div>
        <label>Check All</label>&nbsp;<input type="checkbox" id="check-all" onClick={this.checkall} />
        <Table rowsCount={rows.length} width={1000} height={300} headerHeight={50} rowHeight={50} rowGetter={rowGetter}>
          <Column label="Col 1" width={500} dataKey={0} />                                                            
          <Column label="Col 2" width={500} dataKey={1} cellRenderer={checkBox} align="center" />
        </Table>
      </div>
    );
  },

  checkall:function(){
    var checked = $("#check-all").is(':checked');    
    $(".kill-checkbox").each(function(){
      $(this).prop('checked', checked);
    });
  },  

});

module.exports = TableTester;

Answer 1

这取决于应用程序中选中或未选中的复选框意味着什么，以及何时需要这些信息。这样做可以有效地将状态放入DOM中，当您稍后需要该信息时，您将不得不返回到DOM以获得该状态。

另一种方法是拥有一些数据，这些数据表示或可以用于导出每个复选框的复选性，并使用这些数据来设置其checked支柱。然后，您需要实现适当的事件处理程序，以便根据用户的操作适当地更新数据。

例如，如果您正在显示具有关联值的复选框网格，则可能有一个selectedValues列表。为了方便创建示例代码，我们会将它放在组件的状态中，但这可能是作为一个道具，或者是生活在商店中，或者.

getInitialState() {
  return {
    selectedValues: []
  }
},

然后，可以使用所选值的列表导出每个复选框的checked状态：

renderCheckbox(data) {
  var checked = this.state.selectedvalues.indexOf(data) != -1
  return <input type="checkbox" value={data} checked={checked}/>
}

in render(): cellRenderer={this.renderCheckbox}

但是现在您的复选框是只读的，因为您还没有实现对其上的事件进行更改selectedValues，所以让我们这样做：

_onCheckboxChange(e) {
  var {selectedValues} = this.state
  var {checked, value} = e.target
  if (checked) {
    selectedValues.push(value)
  }
  else {
    selectedValues.splice(selectedValues.indexOf(value), 1)
  }
  this.setState({selectedValues})
},

renderCheckbox(data) {
  var checked = this.state.selectedValues.indexOf(data) != -1
  return <input type="checkbox" value={data} checked={checked} onChange={this._onCheckboxChange}/>
}

现在，要实现类似select/取消选择所有切换的操作，您需要实现一个事件处理程序，该处理程序进行适当的数据更改，并导致组件重新呈现：

_onCheckAll(e) {
  var selectedValues
  if (e.target.checked) {
    // Set all the available values as selected - using the rows variable
    // from your question to put something meaningful here.
    selectedValues = rows.reduce((all, row) => all.concat(row))
  }
  else {
    selectedValues = []
  }
  this.setState({selectedValues})
}

我认为这意味着"React“是根据数据来建模UI，而不是您想要看到的最终结果，在这种情况下是”选择了我显示的值中的哪个？“还是“选中哪个复选框？”

Answer 2

正如承诺的那样，我有一个基于固定数据表问题中提供的解决方案/解释的工作示例：https://github.com/facebook/fixed-data-table/issues/70。

'use strict';

var React = require('react/addons');
var Table = require('fixed-data-table').Table;
var Column = require('fixed-data-table').Column;

var dataKey = 1; // key to store in selected in the sets below it represents the values [b1|b2|b3] as in index 1 

// Fixed data tables (Facebook) requirement:http://facebook.github.io/fixed-data-table/
require('../../styles/fixed-data-table.css');
var TableTester = React.createClass({

  getInitialState: function(){
    return ({
      selected:[],
      rows: [
        ['a1', 'b1', 'c1'],
        ['a2', 'b2', 'c2'],
        ['a3', 'b3', 'c3'],
      ]      
    })
  },

  render: function () {
    var data = this.state.rows;

    return (
      <div>
        <label>Check All</label>&nbsp;<input type="checkbox" onClick={this._toggleAll} />
        <Table rowsCount={data.length} rowGetter={this._rowGetter} onRowClick={this._onRowSelect} width={1000} height={300} headerHeight={50} rowHeight={50}>
          <Column label="Col 1" width={500} dataKey={0} />                                                            
          <Column label="Col 2" width={500} dataKey={dataKey} align="center" 
            cellRenderer={(value) => <input type="checkbox" value={value} checked={this.state.selected.indexOf(value) >= 0} onChange={() => {}} />}/>
        </Table>
      </div>
    );
  },

  _toggleAll:function(e){
    var newSet = [];
    if (e.target.checked) {
      this.state.rows.forEach(function(columns){
        newSet.push( columns[1] );
      });
    }
    this.setState({
      selected: newSet
    });

  },

  _onRowSelect: function(e, index) {
    var value = this.state.rows[index][dataKey];
    var newSet = this.state.selected;
    if ( newSet.indexOf(value) < 0 ) { // does not exist in list
      newSet.push(value);
    } else {
      newSet.splice(newSet.indexOf(value), 1);
    }  
    this.setState({
      selected: newSet
    });

  },  

  _rowGetter: function(rowIndex){
      return this.state.rows[rowIndex];
  }

});

module.exports = TableTester;