Question

我是新手，只能理解基本知识。我从有人那里得到了这个项目，但是我从早上开始就抓住了deletePersonHandler函数的工作方式，以及如何将index作为prop传递，然后在Person组件中访问该prop，并点击组件他可以删除特定组件。如果您可以尝试轻松地尝试重温它，请引导您。您的帮助将非常感激。

应用组件

class App extends Component {
  state = {
    persons: [
      { id: 'asfa1', name: 'Max', age: 28 },
      { id: 'vasdf1', name: 'Manu', age: 29 },
      { id: 'asdf11', name: 'Stephanie', age: 26 }
    ],
    otherState: 'some other value',
    showPersons: false
  }

  nameChangedHandler = ( event, id ) => {//some other function}

  togglePersonsHandler = () => {//some other function}

  deletePersonHandler = (personIndex) => {
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1);
    this.setState({persons: persons});
  }

  render () {
    const style = {
       //some css styling
    };

    let persons = null;

    if ( this.state.showPersons ) {
      persons = (
        <div>
          {this.state.persons.map((person, index) => {
            return <Person
              click={() => this.deletePersonHandler(index)}
              name={person.name} 
              age={person.age}
              key={person.id}
              changed={(event) => this.nameChangedHandler(event, person.id)} />
          })}
        </div>
      );
    }

    return (
      <div className="App">
        <h1>Hi, I'm a React App</h1>
        <p>This is really working!</p>
        <button
          style={style}
          onClick={this.togglePersonsHandler}>Toggle Persons</button>
        {persons}
      </div>
    );

  }
}

人员组件

const person = ( props ) => {
    return (
        <div className="Person">
            <p onClick={props.click}>I'm {props.name} and I am {props.age} years old!</p>
            <p>{props.children}</p>
            <input type="text" onChange={props.changed} value={props.name} />
        </div>
    )
};

Answer 1

好的，如果我理解的话，你有两个问题：

如何删除点击的人？
deletePersonHandler如何工作？

所以

通过从人员组件调用deletePersonHandler来删除此人。这是由click={() => this.deletePersonHandler(index)指定的（同样click={() ...必须是onClick={() ...！）。因此，如果有人点击Person，它将使用person索引作为参数调用deletePersonHandler。这将删除此人所说的人。
如何删除preson？好的，一行一行：

这是带名称的方法定义和arg personIndex，它可以是人的编号。

deletePersonHandler = (personIndex) => {

他从组件的状态中定义了不变的人

const persons = [...this.state.persons];

他在数组（splice()）

persons.splice(personIndex, 1);

他从拼接数组

this.setState({persons: persons});

设置新状态后，App组件将被重新呈现，但删除一个后只有两个人处于状态。

反应文档：
State and Lifecycle - React
Handling Events - React

Answer 2

请阅读下面的代码注释。有关逐步说明。这实际上归结为理解一些基本的JavaScript构造：

Rest Parameters：...说抓住未知数量的元素并将它们存储到数组中。（注意：使用const persons是完全可以接受的 - 以前的答案是不正确的）
- 也可以写成const persons = this.state.persons
Array.prototype.splice(startIndex, deleteCount)：给定开始删除的索引和停止删除的索引，此方法从数组中删除元素。自＆＃34; deleteCount＆＃34;是1，它将从数组中删除一个元素。该元素是所点击的人的索引。
Array.prototype.map：这是一个迭代器，它针对数组的每个元素运行一个函数。因此，在render()方法中，此代码：this.state.persons.map((person, index)遍历每个人，并为存储在类中的每个人创建Person组件。人阵。请注意，每个人的index都会传递到map()方法。因此，单击处理程序然后将单击的人的单个索引传递给App组件上的deletePersonHandler()方法。这就是它如何知道要删除的人。

您可以在此处找到此代码的有效示例，以供您查看和理解：https://codesandbox.io/s/3084w8rjk6

deletePersonHandler = personIndex => {
  // This says "Create a local variable and assign to the list of persons registered on this class"
  const persons = [...this.state.persons];
  // This says "Use the Integer passed in to this function as personIndex as the starting point in the array,
  // and splice (remove elements from the array starting there for 1 element" (remove the person from the array);
  persons.splice(personIndex, 1);
  // Components have a setState() method, this overwrites the Class' persons state with the local version
  this.setState({ persons: persons });
  // React renders the new persons state into the view
};

Answer 3

因此，人们正在利用ES6提供的一些很酷的功能。让我们逐步完成两个重要部分：

第1部分 这里的第一个重要部分是map函数，它从原始人员数组

创建一个Person组件数组

{this.state.persons.map((person, index) => {
            return <Person
              click={() => this.deletePersonHandler(index)}
              name={person.name} 
              age={person.age}
              key={person.id}
              changed={(event) => this.nameChangedHandler(event, person.id)} />
          })}

map function具有JavaScript语言提供的一些内置功能。其中一个功能是提供一个索引参数，该参数跟踪您在循环每个元素时在数组中的当前索引。所以当你看到：

(person, index)

此人正在使用内置功能将整数值附加到每个Person组件。

这很重要，因为它们使用此整数值来跟踪您在状态中存储的人员数组中的特定人员索引。这个地图功能中的另一个重要部分是：

click={() => this.deletePersonHandler(index)}

每个Person Component也会使用内联函数创建，其索引已经硬编码到deletePersonHandler函数的参数中。当从特定Person中调用deletePersonHandler函数时，deletePersonHandler已经确切地知道应该删除数组中的哪个元素，因为索引被硬编码到其中。

第2部分 让我们回顾一下deletePersonHandler里面发生的事情：

deletePersonHandler = (personIndex) => {
    const persons = [...this.state.persons];
    persons.splice(personIndex, 1);
    this.setState({persons: persons});
}

首先，他们正在创建人员阵列的副本，以便不处理存储在状态中的实际人员阵列，这只是一个好习惯。他们通过利用ES6 spread operator来做到这一点，您可以通过点击链接阅读它。

其次，使用从前一个map函数作为参数传递的硬编码整数索引，他们使用splice方法从新创建的数组中删除该元素。

persons.splice(personIndex, 1)

第一个参数是自解释的，但第二个参数只是说，“我只想删除这个1元素。”

完成之后，将其设置为新创建的数组，以替换状态中的原始人员数组。

这是codepen，你可以随意使用。确保取消注释某些console.log，以便您可以看到发生了什么。它只是一些奇特的JavaScript在一天结束时，没有什么特别的反应。

从组件数组中删除组件

3 个答案: