React JS：意外使用“事件”无限制全局变量

Question

我将 nameChangedHandler 方法作为对已更改属性的引用传递，并最终传递给我在此处未提及的 person 组件，但我在事件对象中收到错误。

class App extends Component {

  state = {
   persons: [
    {id: 'abc', name: "Max", age: 28},
    {id:'def', name: "Suzi", age: 30},
    {id:'fgh', name: "Alex", age:33}
    ],
  otherState: 'some other value',
  showPersons: false
       }

nameChangeHandler = (event) => {

  this.setState({
    persons: [
    {name: "Max", age: 28},
    {name: event.target.value, age: 30},
    {name: "Alex", age:26}
  ]
}
  );

}

 display_persons = (
  <div>
      return <Person         
             changed={()=>this.nameChangeHandler(event)}  />
    
</div>  
 );
}

return(
<div className="App">
  {display_persons}
</div>

 );

 }
 }


export default App;

Answer 1

因为你没有定义event它认为event是全局的。 onChange提供event作为参数，但您必须定义它。

试试这个代码：

<Person changed={(event)=>this.nameChangeHandler(event)} />

或者这个：

<Person changed={this.nameChangeHandler} />

回复评论：

嗯，就像一样() => 2 + someParameter。这是行不通的，因为箭头函数someParameter是未知的，它会给出错误。该组件Person有一个属性onChange，它可能只需要一个函数，并向其传递一个参数，即 onChange 事件。如果您传递一个无参数箭头函数，就像您的问题一样，event将在本地没有绑定，因此它将用于全局变量。就像consolefromconsole.log是一个全局的。所以即使这样的代码也能工作：

(randomName) => this.nameChangeHandler(randomName)

因为event绑定到了参数randomName。

我不知道你的经验，所以如果你无法理解它，可能会对“范围”、“参数绑定”或“React onChange”做一些进一步的研究。也许这些会比我写的更清楚:)