app.js:
state = {
persons: [
{ name: 'Max', age: 25 },
{ name: 'Manu', age: 29 },
{ name: 'Stephanie', age: 26 }
]
}
switchNameHandler = () => {
console.log('Was clicked!');
}
render() {
return (
<div className="App">
<h1> Working................ </h1>
<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
<Person name="abc" age="20" />
<Person name="uvw" age="20" />
<Person name="uvw" age="20" />
<Person name="lmno" age="20" >Working.........</Person>
<button onClick={this.switchNameHandler()}>switch Name</button>
</div>
);
}
}
输出:（单击6-7次后）DevTools无法加载sourceMap:无法加载Chrome的内容-扩展名://GigHMMPIobklFEPJOCNAMGKKBiglidom/include.preload.js.map:HTTP错误:状态代码404，NET::ERR_UNKNOWN_URL_SCHEME log.js:24[HMR]正在等待来自WDS的更新信号。。。 react-dom.development.js:24994下载React DevTools，以获得更好的开发体验:。。。。 app.js:20被点击了！ app.js:20被点击了！ DevTools无法加载sourceMap:无法加载Chrome的内容-扩展名://GigHMMPIobklFEPJOCNAMGKKBiglidom/include.postload.js.map:HTTP错误:状态代码404，NET::ERR_UNKNOWN_URL_Scheme grammarly.js:2[默认]:警告:使用默认根记录器
你的问题来了。
<button onClick={this.switchNameHandler()}>switch Name</button>
您不需要函数末尾的()。 如果您有()，则执行SwitchNameHandler函数，并将该函数的返回值（如果有）分配给onClick处理程序。
您需要像这样给onClick
<button onClick={this.switchNameHandler}>switch Name</button>
或
<button onClick={()=>this.switchNameHandler()}>switch Name</button>
onClick期望一个函数，而不是函数的返回，除非返回是另一个函数。
你需要把函数变成变量，和你的对象一样。 请尝试以下操作:
var state = {
persons: [
{ name: 'Max', age: 25 },
{ name: 'Manu', age: 29 },
{ name: 'Stephanie', age: 26 }
]
}
var switchNameHandler = () => {
console.log('Was clicked!');
}
