Question

任何人都可以帮我解决下面这些代码

我想添加删除功能，其中每行都有删除选项，点击删除[x]按钮我需要删除所刷新的受尊重的行，不应显示已删除的数据。

这是我的代码

const DeleteButon = (props) => {
return (
 <div>
   <button>X</button>
 </div>
);
};
class SavedCrosstabs extends Component {

static getSavedCrosstabColumns() {
 return [
   { key: 'title', name: 'Name', sortable: true },
   { key: 'lastModified', sortKey: 'lastModifiedSortable', name: 'Updated', sortable: true },
   { key: 'delete', name: '', width: 35, resizable: false, formatter: DeleteButon, sortable: true },
 ];
 }

 constructor(props) {
 super(props);
 }
**complete code is not pasted**
 }

render() {
 return (
   <div>
     <div className="row">
       <div className="large-12">
         <DynamicDataGrid
           ref={node => (this.savedCrosstabGrid = node)}
           gridCategory="SaveCrosstabGrid"
           className="saved-crosstab-grid saved-crosstab-width"
           rows={this.props.rowData}
           columns={this.constructor.getSavedCrosstabColumns()}
           rowSelectionType="Single"
           isCellSelectable
           minimunRows={5}
         />
       </div>
     </div>
     <div className="row">
       <div className="row-margin-top-10px">
         <div className="large-3 float-right text-right">
           <GenericButton name="Load" btnStyle="button load-btn" onBtnClick={() => this.handleLoadCrosstab()} />
         </div>
 }

等待一些帮助非常新的反应js

Answer 1

你应该重写你无状态的组件deleteButton，并为他提供两个道具：一个删除一行的函数，以及该行的id。

const deleteButton = (props) => {
    return(
        <button onClick= { () => props.removeRow(props.id)} x </button>
};

Answer 2

很难判断要删除哪些行 - 在<DynamicDataGrid />或<div className="row">中生成的行？

如果要删除DynamicDataGrid中的那些 - 您可以看到它们是由{this.props.rowData}构建的。这意味着您需要创建一个方法来从控制该信息的组件中的rowData中提取项目并将其传递下去。

我一般处理这种情况的方法是这样的：

将您需要的所有数据放入Redux State或Local Component State。

有generateRows()函数，如下所示：

return this.state.rowData.map(item => return (
  <tr key={item._id}> // you can also use item index
      {item.name}
  </tr>
  <button 
     onClick=this.deleteRow.bind(this, item._id)> // Or index
        Delete
  </button>))

在Component的渲染方法中，生成行：

render() {
  return(
   {this.state.rowData && this.generateRows}
  )
}

请注意，我们将deleteRow函数绑定到每行旁边的按钮。我们还传递了每个项目的item.key

deleteRow(item_id) {
 ... do something that removes the item from the database
 ... if you passed in the index instead of the _id, you need to pull that item out of the array that built your rows in the first place, update state with setState, and your rows will be updated - they are generated by mapping your array of data, so you must pull the data to be deleted out!
}

如何使用Reactjs和Redux删除每一行

2 个答案: