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

Question

我已经创建了删除功能，当用户单击删除[X]时，它必须从 react 中使用的数据 GridView 的相关行中删除

将 id 作为参数传递使用_find索引(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>
    )
}
}

子组件正在接收列表项作为 Prop ，当单击父级处理程序时，将调用父级处理程序，这将更新列表项和父级的 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>
    )
}
}