代码之家 › 专栏 › 技术社区 › RwwL

React click处理程序不工作,正在将“[object]”写入DOM

reactjs javascript

RwwL · 技术社区 · 5 年前

这最终证明是一个巴别塔配置问题。

我第一次使用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>

我的期望/理解是,在这种情况下不需要约束,因为不需要 this 处理程序中的引用。我试着在内部和外部定义处理程序 App ,将其定义为箭头函数,将其定义为 function handler(e) { ... } on="[object Object]"

这是怎么回事?我好像错过了一些显而易见的东西。