javascript - react JS : Unexpected use of 'event' no-restricted-globals

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

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

试试这个代码:

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

或者这个:

<Person changed={this.nameChangeHandler} />

评论答案:

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

(randomName) => this.nameChangeHandler(randomName)

因为事件绑定(bind)到参数randomName。

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