Question

我创建了删除功能，当用户点击删除[X]时，必须从反应中使用的w.r.t数据网格视图中删除它

将id作为参数传递使用_find index（loadlash）

问题：

1）所选行不会被删除。

代码：

onclick事件

      <div>
        <button onClick={() => this.deleteHandler(params.value)}>X</button>
      </div>

删除代码：

 deleteHandler = (id) => {
 const arrayPerson = this.props.rowData;
 const index = _.findIndex(this.props.rowData, { id: id });
 if (arrayPerson.indexOf(id) > -1) {
   arrayPerson.splice(index, 1);
   this.setState({ rows: arrayPerson });
 }

任何人都可以帮我解决这个问题。

Answer 1

这是一个有效的例子，如果你将数据从父传递给子，那么你可以做多件事。

父组件。

class TestComp extends React.Component {
constructor() {
    super();
    this.state = { listItems: [{ id: 1, text: "abc" }, { id: 2, text: "bcd" }, { id: 3, text: "dec" }] }
    this.handleRowClick = this.handleRowClick.bind(this);
}
handleRowClick(id) {

    const listItems = this.state.listItems;
    let copyListItems = [];
    listItems.forEach(function (item) {
        let objCopy = Object.assign({}, item);
        copyListItems.push(objCopy);
    });
    let updatedArray = _.remove(copyListItems, function (item) { return item.id == id; });

    this.setState({ listItems: copyListItems });
}
render() {

    return (
        <div>
            <ChildComp
                list={this.state.listItems}
                deleteHandler={this.handleRowClick}
            />
        </div>
    )
}
}

正在接收列表项作为道具的子组件，当单击时，将调用父处理程序，它将更新列表项和父类的setState，这将更新提供给子组件的列表，因此它将被呈现。

export class ChildComp extends React.Component {

render() {
    let list = this.props.list.map((obj) =>
        <div key={obj.id} id={obj.id} style={{ padding: "10px", backgroundColor: "grey", border: "1px solid black" }} onClick={() => { this.props.deleteHandler(obj.id) }}> {obj.text} </div>
    );
    return (
        <div >
           {list}
        </div>
    )
}
}

删除功能无法正常工作 - Reactjs

1 个答案: