react-bootstrap 上的 onClick 事件

Question

I'm trying to learn MEAN and I was trying to make an Easy Pokemon finder.

The thing is that i'm having troubles with events attaching to a component.

Here is the main view:

 import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; /* Import Components */ import Search from './components/Search/Search'; import { Grid, Row, Col } from 'react-bootstrap'; /* Import Actions */ import { fetchByName } from './PokedexActions'; // Import Style //import styles from './Pokedex.css'; class Pokedex extends Component { handleFind= (name) =>{ this.props.dispatch(fetchByName({name})); }; render() { return ( <Grid> <Row> <Col md={4}> <Search findPokemon={this.handleFind}/> </Col> <Col md={4}></Col> <Col md={4}></Col> </Row> </Grid> ); } } const mapStateToProps = (state) => { return {}; }; const mapDispatchToProps = (dispatch) => { return {}; }; Pokedex.contextTypes = { router: React.PropTypes.object }; export default connect( mapStateToProps, mapDispatchToProps )(Pokedex);

and here it's the search componenet:

 import React, { Component, PropTypes } from 'react'; import { ControlLabel, FormControl, Button } from 'react-bootstrap'; export class Search extends Component { handleClick(){ console.log("algo"); this.props.findPokemon('eevee'); //console.log(this.refs.name); } render() { return ( <div> <ControlLabel>Pokemon Search</ControlLabel> <FormControl type="text" placeholder="Pokemon" ref="name" onChange={this.handleClick}/> <Button bsStyle="primary" onClick={this.handleClick}>Find</Button> </div> ); } } Search.propTypes = { findPokemon: PropTypes.func.isRequired }; export default Search;

Unfortunately it won't get fired the events attached to neither button nor form Control...

Anybody knows what it could be wrong?

Thanks!

Answer 1

Just like Ved mentioned, you should use onChange={this.handleClick.bind(this)} instead of onChange={this.handleClick} .

However, you could add constructor for class Pokedex to get more readability.

export class Search extends Component {
  constructor(props, context) {
    super(props, context);
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  // the rest of code...
}