更新:最终证明这是 Babel 配置问题。
我是第一次使用 React 函数组件,并且通过事件处理程序得到了一些意想不到的结果。这是我在遇到更充实的组件问题后创建的一个大幅简化的测试用例:
const App = () => {
const handler = function(e) {
e.preventDefault();
console.log('handleAppClick');
};
return (
<div onClick={ handler }>This is the whole thing.</div>
);
};
ReactDOM.render(<App />, document.querySelector('#app'));
body {
font-family: monospace;
}
#app {
border: 2px solid black;
padding: 8px;
border-radius: 2px;
cursor: pointer;
user-select: none;
}
<script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
<div id="app"></div>
我的期望/理解是,在这种情况下不需要绑定(bind),因为处理程序中不需要 this
引用。我尝试在 App
内部和外部定义处理程序,将其定义为箭头函数,将其简单地定义为 function handler(e) { ... }
,但是在在所有情况下,我在渲染页面上的该 div 上都没有获得有效的点击处理程序,如果我检查 DOM,我可以在 div 上看到 on="[object Object]"
属性。
这是怎么回事?看来我只是错过了一些明显的东西。
最佳答案
最终证明这是 Babel 配置问题。感谢所有提出意见或建议的人。
关于javascript - React 点击处理程序不工作并将 ="[object Object]"写入 DOM,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59592500/