如何在react.js中使用onClick？

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

這里有兩點值得注意：

1. 您只能捕獲DOM元素上的click （或其他事件）。 如果要捕獲自定義組件上的click事件，則需要將其委托給組件內的DOM元素。

2. 您傳遞給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>

如果添加花括號，則需要顯式返回該值。