Reactjs 在react中，渲染组件时onClick将激发。。。怎么办？

我坐在输入登录控制台嘿，如果我点击它。我重新加载页面，不碰任何东西，然后它会在浏览器的控制台中激发hey。这是什么？ 我试图添加一个英雄到商店，但它添加了一个未定义的，不能通过地图使用。所以我尝试了控制台日志。我发现了我上面写的东西。你做什么

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getHeroes, addHero } from '../actions/heroActions';
import PropTypes from 'prop-types';
import uuid from 'uuid';


class HeroList extends Component {
    state = {
        hero: ''
    }

    componentDidMount() {
        this.props.getHeroes();
    }

    handleChange = e => {
        this.setState({
          [e.target.name] : e.target.value
        })
    }
    addHero = hero => {
      this.props.addHero(hero);
      this.setState({hero: ''})
    }

    render() {
        return (
            <div>
                <h1>Heroes:</h1>
                <ul>
                {this.props.heroes.map(hero => 
                    (
                    <li key={hero.key}>
                        {hero.name}
                    </li>
                    )
                )}
                </ul> 

                  <input value={this.state.hero} type="text" name="hero" onChange={this.handleChange}/>
                  <input onClick={console.log('hey')} type="submit" value="add Item" />
                  <p>{this.state.hero}</p>
            </div>
        );
    }
}

HeroList.propTypes = {
    onGetHeroes: PropTypes.func.isRequired,
    hero: PropTypes.object.isRequired
}

//E-miatt lehet használni this.props ban a heroes-t
const mapStateToProps = (state) => {
  return {
    heroes: state.hero.heroes
  };
};


const mapDispatchToProps = (dispatch) => {
  return {
    onGetHeroes : () => dispatch(getHeroes())
  };
};

export default connect(mapStateToProps, {getHeroes, addHero})(HeroList);

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从“../actions/heroActions”导入{getheros，addHero}；
从“道具类型”导入道具类型；
从“uuid”导入uuid；
类列表扩展组件{
状态={
英雄：''
}
componentDidMount（）{
this.props.getHeroes（）；
}
handleChange=e=>{
这是我的国家({
[e.target.name]：e.target.value
})
}
addHero=hero=>{
this.props.addHero（hero）；
this.setState（{hero:'}）
}
render（）{
返回(
英雄：

{this.props.heros.map（hero=>
(

{hero.name}

)
)}

{this.state.hero}

);
}
}
HeroList.propTypes={
onGetHeroes:PropTypes.funct.isRequired，
英雄：PropTypes.object.isRequired
}
//E-miatt lehet használni这个。道具禁止英雄-t
常量mapStateToProps=（状态）=>{
返回{
英雄：国家，英雄，英雄
};
};
const mapDispatchToProps=（调度）=>{
返回{
onGetHeroes:（）=>调度（getHeroes（））
};
};
导出默认连接（mapStateToProps，{getHeroes，addHero}）（HeroList）；

您正在调用函数而不是传递函数：

onClick={console.log('hey')}

将其更改为：

onClick={() => console.log('hey')}

---

您需要将函数传递给单击。执行此操作的正常方法是定义一个匿名箭头函数，如上面所述。

您正在调用该函数，而不是传递该函数：

onClick={console.log('hey')}

将其更改为：

onClick={() => console.log('hey')}

您需要将函数传递给单击。通常的方法是定义一个匿名箭头函数，如上面所述