React JS：意外使用 'event' no-restricted-globals

Question

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

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 将没有本地绑定，所以它会寻找全局变量。像 console.log 中的 console 是全局的。所以即使这个 (randomName) => this.nameChangeHandler(randomName) 也可以工作，因为事件绑定到参数 randomName.

我不知道你的经历，所以如果你理解起来有困难，可以对 'scopes'、'parameter binding' 或 'React onChange' 做一些进一步的研究。n也许这些会比我写了什么:)

React JS：意外使用 'event' no-restricted-globals

React JS: Unexpected use of 'event' no-restricted-globals

html

javascript

css

reactjs

react-dom