Question

我坐在输入中登录控制台，如果我单击它，嘿。我重新加载页面，不触摸任何东西，这在浏览器的控制台中触发了嘿。这是什么？我试图将英雄添加到商店，但它添加了未定义的内容，无法通过地图使用。所以我尝试了控制台日志。我发现了我上面写的。该怎么办？

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);

Answer 1

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

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

将其更改为：

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

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

作为响应，渲染组件时会触发onClick ...该怎么办？

1 个答案: