reactJs onClick处理程序无法正常工作

Question

虽然正确定义了onClick处理程序，但是console.log（'hi'）不会在控制台上打印

import React from 'react';
import './charComponent.css'
const CharOne = (props) =>{
 return (<div>
 <div className="charOne" onClick={console.log('hi')}>{props.letter}</div>
 </div>
 )
}
export default CharOne;

Answer 1

console.log（'hi'）立即调用，

所以你的onClick无关（没有工作）。见下面的代码。

import React from 'react';

import ReactDOM from 'react-dom';
const myFunction = () => console.log('hi');

const CharOne = () => <div onClick={myFunction}>Click-Me</div>

ReactDOM.render(<CharOne />, document.getElementById('root'));

如果要传递参数，请使用箭头函数。

import React from 'react';

import ReactDOM from 'react-dom';

const myFunction = props => console.log(props);

const CharOne = () => <div onClick={() => myFunction('Hello')}>Click-Me</div>

ReactDOM.render(<CharOne />, document.getElementById('root'));

Answer 2

您必须将函数作为参数传递：

import React from 'react';
import './charComponent.css'
const CharOne = (props) =>{
 return (<div>
 <div className="charOne" onClick={() => console.log('hi')}>{props.letter}</div>
 </div>
 )
}
export default CharOne;