Question

如何使用onClick事件或诸如此类的其他事件？

import mycomponent from './path'    

class App extends React.Component{

    render()
    {
      <mycomponent onClick={console.log("Click"}/>
    }
}

如何给mycomponent onClick事件？

import React from 'react'
const mycomponent = () =>{<p>Click Me</p>}

export default mycomponent

Answer 1

Props是传递到基于函数的react组件的第一个值：

import React from 'react'
const mycomponent = (props) =>{<p onClick={props.onClick}>Click Me</p>}

export default mycomponent

在您的应用组件中：

import mycomponent from './path'    

class App extends React.Component{

    render()
    {
      <mycomponent onClick={() => console.log("Click"}/>
    }
}

Answer 2

这里有两点值得注意：

您只能在DOM元素上捕获click（或其他事件）。如果要在自定义组件上捕获click事件，则需要将其委托给组件内的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>

如果添加花括号，则需要显式返回该值。

如何在react.js中使用onClick？

2 个答案: