Question

我需要从数组中删除一行数据。我不知道如何将该行的索引从子级传递到父级。下面是我的代码： App.js

 state = {
      courses: [{course:'' }] 
  }
  onDelete(index){
    this.setState((prevState) => ({
      courses: prevState.courses.filter((_, i) => i !== index)
    }));  
  }
  render() {
     const courses = this.state.courses.map((course, i) => {
      return (
        <ClassItem index={i}  onDelete={this.onDelete(i)} />
      );
    });
    return (
      <div>
         {courses}
      </div>
    );
  }

子组件：

 class ClassItem extends Component {
 onDelet(index){
   this.props.onDelete(index);
 }
  render() {
    return (
      <tr>
        <td><input type="text"  placeholder="Course Name" ></input></td> 

         <td>
         <button  onClick={this.onDelete} /></td>
      </tr>
    );
  }
}

export default ClassItem;

Answer 1

您快到了。在您的父母中，您需要通过声明一个函数并将其传递给onDelete来关闭索引，以获取索引的值。

render() {
   const courses = this.state.courses.map((course, i) => {
     return (
      <ClassItem index={i} onDelete={() => this.onDelete(i)} />
  )}
)}

然后在您的孩子中，您只需呼叫onDelete道具：

class ClassItem extends Component {

  render() {
    return (
      <tr>
        <td><input type="text"  placeholder="Course Name"></input</td> 
        <td><button onClick={this.props.onDelete}/></td>
      </tr>
    );
  }
}

export default ClassItem;

在父母中捕获index的另一种方法是使用您传入的索引作为孩子的道具：

class ClassItem extends Component {

 render() {
    return (
      <tr>
        <td><input type="text"  placeholder="Course Name"></input</td> 
        <td><button onClick={()=>this.props.onDelete(this.props.index)}/></td>
      </tr>
    );
  }
}

这意味着您只需传递对this.onDelete的引用，而不必将其包装在另一个函数中：

render() {
   const courses = this.state.courses.map((course, i) => {
     return (
      <ClassItem index={i} onDelete={this.onDelete} />
  )}
)}

编辑后添加：

Doh，忘了使用这样的地图索引还有另一个问题-在删除项目时，您需要为每个项目使用唯一且不变的键，以便差异引擎知道要跟踪的项目。因此，在映射课程时，请勿使用i索引，而应使用唯一键并使用它来过滤this.onDelete中的项目。

如何将孩子索引传递给父母

1 个答案: