Question

所以我在Udemy上按照 Maximilian Schwarzmüller 的课程学习，我的一个解释就是他。

早些时候他做了类似下面的事情

  <input type="text" onChange={props.changed} value={props.name} />

并在App JS中

changed={this.eventSwitchHandler}

在我们输入时更改名称的输入。这是我的eventSwitchHandler

eventSwitchHandler = (event) => {
  this.setState({
    person: [
    {name: "shivom", age: 23},
    {name: event.target.value, age: 23},
    {name: "Vaibhav", age: 58}
    ]
  })
}

这是我们的内容是静态的，只能在第二个元素上工作，现在当我们将内容视为动态时，例如

  render() {
    let person = null;

    if (this.state.showPerson) {
      person= (
        <div>
          {
            this.state.person.map((el, index) => {
              return <Person
              key={el.id}
              click={this.deletePersonHandler.bind(index)}
              name={el.name}
              age={el.age}

            })
          }
       </div>
     );
    }

他正在为改变事件做这样的事情

changed={(event) => this.eventSwitchHandler(event, person.id)}

他提到（在第一个例子中，当我们的内容是静态的时，会自动将事件传递给eventSwitchHandler，但现在他将事件作为匿名函数中的参数。

有人可以解释相同的原因，因为他的解释有点含糊不清吗？

以前是我们在做的比较

return (

//--//-- lecture 1
  //---// -- we wrote this in lecture (JSX code) -> (1le)
  <div className="App">
        <h1> Hi I am react App</h1>
        <button onClick={this.switchEventHandler.bind(this, "Hait")}>Button</button>
        <Person
          name={this.state.person[0].name}
          age={this.state.person[0].age}>
        </Person>
        <Person
          name={this.state.person[1].name}
          age={this.state.person[1].age}
          click={this.switchEventHandler.bind(this, "rahul")}
          changed={this.eventSwitchHandler} >
        </Person>
        <Person
          name={this.state.person[2].name}
          age={this.state.person[2].age} > (son of Hariom)
        </Person>
       </div>
     )
   }
}

Answer 1

在静态情况下，eventSwitchHandler始终更改同一个人的name属性。在第二个示例中，它必须知道哪个人名必须更改，因为每个名称更改必须由此处理程序处理。

因此，我们不是直接将该处理程序传递给<Person>组件，而是传递一个箭头函数，该函数在调用时另外使用person id调用处理程序。换句话说，函数本身存储了应该为eventSwitchHandler调用的人。

passing additional arguments to event handlers这是一种常见的做法，但有一点需要注意：

此语法的问题是每次组件呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果将此回调作为prop传递给较低的组件，那么这些组件可能会进行额外的重新渲染。

React：了解动态内容的传递

1 个答案: