场景: 把JS里面的this使用方法在react组件中使用了,报错undefined.
发现在在React组件中,this
并不指向DOM元素本身,而是指向组件实例。
示例:报错
function App() {
function test(p){
p.innerHTML = '我改变了'
}
return (
<>
<p className="read-the-docs" onClick={test(this)}>
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
正确写法:
function App() {
function test(p){
p.innerHTML = '我改变了'
}
return (
<>
<p className="read-the-docs" onClick={(event) => test(event.target)}>
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App