向react（通量）固定数据表中的每一行添加按钮

IT技术 reactjs
2021-05-05 04:19:11

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

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>
        );
    }    
})

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

3个回答

下面是在react固定数据表的每一行添加按钮的示例代码

    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);

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

然后返回( {buttons} );

这应该有效。希望能帮助到你。

已经有 API 的 v6 迁移，这些 API 已弃用 CellRenderer 等构造。

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

但是新的解决方案非常酷。

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

其它你可能感兴趣的问题
上一篇RxJS 和 React 的 setState - 延迟函数执行直到订阅 下一篇react从孩子到父母的沟通问题