Question

我正在尝试向固定数据表中的每一行添加按钮，但我不知道如何。我目前的代码：

var Details = React.createClass({    

    getInitialState() {
            return {
              rows: usersStore.getUsersList(),
              filteredRows: null,
              filterBy: null,
            };
          },    

           componentWillMount() {
            this._filterRowsBy(this.state.filterBy);
          },

          _rowGetter(rowIndex) {
            return this.state.filteredRows[rowIndex];
          },

          _filterRowsBy(filterBy) {
            var rows = this.state.rows.slice();        
            var filteredRows = filterBy ? rows.filter(function(row){
              return row.name.toLowerCase().indexOf(filterBy.toLowerCase()) >= 0
            }) : rows;

            this.setState({
              filteredRows,
              filterBy,
            });
          },

          _onFilterChange(e) {
            this._filterRowsBy(e.target.value);
          },

    render: function () {   

        return (

            <div>
                <label>filter by <input onChange={this._onFilterChange} /></label>
                <Table
                 height={200}      
                  rowHeight={30}
                  rowGetter={this._rowGetter}
                  rowsCount={this.state.filteredRows.length}
                  width={450}
                  maxHeight={450}
                  headerHeight={40}>
                  <Column
                    label="Name"
                    width={270}
                    dataKey="name"
                  />
                  <Column
                    label="Age"
                    width={100}
                    dataKey="age"
                  />
                  <Column
                    label="Qualification"
                    width={120}
                    dataKey="Qualification"
                  />
                  <Column label="Edit"
                    width={120}>
                    <button type="button" className="btn btn-default" onClick={this.update}>Update</button>
                  </Column>
                </Table>
            </div>
        );
    }    
})

使用此代码时，显示datakey是强制性的，如果我删除列标签并仅添加表中的按钮，则表示不接受。

Answer 1

以下是向反应固定数据表

中的每一行添加按钮的示例代码

    var Table = FixedDataTable.Table;
var Column = FixedDataTable.Column;

var EmpTable = React.createClass({

  getInitialState: function() {
    return {
      rows: [
        {title: "Ramu", rank: "1", year: "2000"},
        {title: "Harsha", rank: "2", year: "1999"},
        {title: "Hussain", rank: "3", year: "1998"},
        {title: "Vamsi", rank: "4", year: "1997"},
        {title: "Mahesh", rank: "5", year: "1996"},
        {title: "Nitesh", rank: "6", year: "1995"},
        {title: "Subbu", rank: "7", year: "1994"},
        {title: "Kamal", rank: "8", year: "1993"},
        {title: "Kishore", rank: "9", year: "1992"},
        {title: "Venu", rank: "10", year: "1991"},
        {title: "Bhasi", rank: "11", year: "1990"},
        {title: "Suresh", rank: "12", year: "1989"},
        {title: "Ramesh", rank: "13", year: "1988"},
        {title: "Narendra", rank: "14", year: "1987"},
        {title: "Anil", rank: "15", year: "1986"}
      ]
    };
  },


  _displayDataForRow(rowData, rowIndex){      

    alert(rowIndex);
    alert(JSON.stringify(rowData));

  },

  _renderButton(cellData, cellDataKey, rowData, rowIndex){

    return <button style={{width: '80%'}} onClick={this._displayDataForRow.bind(null, rowData, rowIndex)}>click</button>;

  },

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

  render: function() {
    return (
      <div>
        <Table
          rowHeight={30}                  
          rowGetter={this._rowGetter}             
          rowsCount={this.state.rows.length}          
          width={500}
          maxHeight={200}
          headerHeight={30}>

          <Column
           label="Name"
           width={200}
           dataKey="title"
          />
          <Column
           label="Rank"
           width={100}
           dataKey="rank"
          />
          <Column
           label="Year"
           width={100}
           dataKey="year"
          />
          <Column
           label="Click"
           width={80}                      
           cellRenderer= {this._renderButton}                 
          />
        </Table>
      </div>
    );
  }
});

EmpTable = React.createFactory(EmpTable);

React.render(EmpTable(), document.body);

Answer 2

var buttons = [];
SomeButtonsProps.forEach(function(props) {
    var button = <button> props.whatever </button>;
    buttons.push(button);
});

然后返回（ {纽扣} ）;

这应该有效。希望它有所帮助。

Answer 3

已经推出了v6的API迁移，它们弃用了CellRenderer等构造。

https://facebook.github.io/fixed-data-table/v6-migration.html

但新解决方案非常酷。

该页面提示如何编写自己的自定义渲染器可以在列表列中注入自己的HTML元素。

在react（flux）固定数据表中为每一行添加按钮

3 个答案: