如何使用 onClick 事件或任何其他类似的事件?
import mycomponent from './path'
class App extends React.Component{
render()
{
<mycomponent onClick={console.log("Click"}/>
}
}
如何给我的组件提供onClick事件?
import React from 'react'
const mycomponent = () =>{<p>Click Me</p>}
export default mycomponent
最佳答案
这里有两点值得注意:
您可以捕获
click
(或其他事件)仅在 DOM 元素上。如果你想捕获click
自定义组件上的事件,您需要将其委托(delegate)给组件内的 DOM 元素。您传递给
onClick
的内容应该是一个函数。在这里,您将调用该函数的结果传递给onClick
(console.log('Click')
是函数调用,而不是函数)。
这是一个运行示例:
const MyComponent = (props) => (<p onClick={props.click}>Click Me</p>)
class App extends React.Component {
click () {
alert('clicked')
}
render() {
return (
<div>
Provide a function to click event: <MyComponent click={this.click} />
Provide an anonymous function to click event: <MyComponent click={() => alert('yes')} />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
</div>
另请注意这一行 const mycomponent = () =>{<p>Click Me</p>}
应该是
const mycomponent = () => <p>Click Me</p>
如果添加花括号,则需要显式返回该值。
关于javascript - 如何在react.js中使用onClick?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51832797/