反应 在onClick中调用多个事件处理程序将导致“空”或“未定义”

Question

I have two event handlers, one that is within the component (the child called "counter.js" and one passed by props which is the parent "container.js")

I want to pass to events onClick however I can only get one to work at a time, not both. I've tried writing a function that would hold both events and use that onClick but then I get errors.

Both events function find if I use just one of them, but using both tends to break. Can I get a second set of eyes of what I'm doing wrong?

In my parent component (container.js) I pass this as props:

    class Container extends Component {
  constructor(props) {
    super(props);

    this.moveCard = this.moveCard.bind(this);
    this.state = {
      id: players.id,
      totalScore: 0,
      countInfo: [],
      evilName: '',
      color: '#6E68C5',
      scoreColor: '#74D8FF',
      fontAwe: 'score-icon',
      incrementcolor: '',
      scoreNameColor: 'white',
      glow: '',
      buttonStyle: 'count-button-start'
    };

    this.incrementCountTotal = this.incrementCountTotal.bind(this);
    this.decrementCountTotal = this.decrementCountTotal.bind(this);
  }

  incrementCountTotal() {
    this.setState({
      totalScore: this.state.totalScore + 1
    });
  }

  decrementCountTotal() {
    this.setState({
      totalScore: this.state.totalScore - 1
    });
  }

  moveCard(dragIndex, hoverIndex) {
    const { cards } = this.state;
    const dragCard = cards[dragIndex];

    this.setState(
      update(this.state, {
        cards: {
          $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
        }
      })
    );
  }

  sortableGroupDecorator = componentBackingInstance => {
    if (componentBackingInstance) {
      let options = {
        group: 'shared'
      };
      Sortable.create(componentBackingInstance, options);
    }
  };

  render() {
    const listPlayers = players.map(player => (
      <Counter
        key={player.id}
        player={player}
        name={player.name}
        sortableGroupDecorator={this.sortableGroupDecorator}
        decrementCountTotal={this.decrementCountTotal}
        incrementCountTotal={this.incrementCountTotal}
      />
    ));
    return (
      <ContainLeft style={{ alignItems: 'center' }}>
        <ProjectTitle>Score Keeper</ProjectTitle>
        <Copy>
          A sortable list of players that with adjustable scores.  Warning, don't go negative!
        </Copy>
        <div>
          <Stats totalScore={this.state.totalScore} players={players} />
          {listPlayers}
        </div>
      </ContainLeft>
    );
  }
}

export default Container;

Then in my child component I want to put two events on the onClick area but they break. (currently I only have one event in the onClick but I'd like both this.incrementCount and incrementCountTotal to work onClick (the incrementCountTotal is from the Parent, the this.incrementCount is in the child component

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      score: 0,
      countInfo: [],
      evilName: '',
      color: '#6E68C5',
      scoreColor: '#74D8FF',
      fontAwe: 'score-icon',
      incrementcolor: '',
      scoreNameColor: 'white',
      glow: '',
      buttonStyle: 'count-button-start'
    };

    this.incrementCount = this.incrementCount.bind(this);
    this.decrementCount = this.decrementCount.bind(this);
  }
  incrementCount() {
    console.log('pressme');
    this.incrementCountTotal;
    this.setState({
      score: this.state.score + 1
    });
    if (this.state.score < 0) {
      this.setState({ color: '#6E68C5' });
      this.setState({ scoreNameColor: 'white' });
      this.setState({ buttonStyle: 'count-button-start' });
      this.setState({ fontAwe: 'fontAwe: score-icon' });
      this.setState({ scoreColor: '#74D8FF' });
      this.setState({ evilName: '' });
    } else if (this.state.score === 9) {
      this.setState({ scoreColor: 'white' });
    } else if (this.state.score === 19) {
      this.setState({ glow: '1px 2px 5px #74D8FF' });
    }
  }

  decrementCount() {
    this.setState({
      score: this.state.score - 1
    });
    if (this.state.score < 0) {
      this.setState({ color: '#381919' });
      this.setState({ scoreNameColor: '#F79D05' });
      this.setState({ buttonStyle: 'count-button-hovering' });
      this.setState({ fontAwe: 'fontAwe: score-icon-switch' });
      this.setState({ scoreColor: '#F79D05' });
      this.setState({ evilName: 'Darth ' });
    } else if (this.state.score === -1) {
      this.setState({ glow: '1px 2px 5px red' });
    } else if (this.state.score === 11) {
      this.setState({ scoreColor: '#74D8FF' });
    } else if (this.state.score === 21) {
      this.setState({ glow: '' });
    }
  }

  render() {
    const {
      name,
      sortableGroupDecorator,
      decrementCountTotal,
      incrementCountTotal
    } = this.props;
    return (
      <div className="group-list" ref={sortableGroupDecorator}>
        <CountCell style={{ background: this.state.color }}>
          <Row style={{ alignItems: 'center' }}>
            <Col>
              <CountButton
                className={this.state.buttonStyle}
                onClick={this.incrementCount}
              >
                <Icon
                  name="icon"
                  className={'fa fa-plus ' + this.state.fontAwe}
                />
              </CountButton>
            </Col>
            <Col>
              <ScoreName style={{ color: this.state.scoreNameColor }}>
                {this.state.evilName + name}
              </ScoreName>
            </Col>
            <Col>
              <Score
                style={{
                  color: this.state.scoreColor,
                  textShadow: this.state.glow
                }}
              >
                {this.state.score}
              </Score>
            </Col>
            <Col>
              <CountButton
                className={this.state.buttonStyle}
                onClick={this.decrementCount}
              >
                <Icon
                  name="icon"
                  className={'fa fa-minus ' + this.state.fontAwe}
                />
              </CountButton>
            </Col>
          </Row>
        </CountCell>
      </div>
    );
  }
}

Counter.propTypes = {
  player: PropTypes.object.isRequired
};

export default Counter;

so when I add:

onClick={(this.incrementCount, incrementCountTotal)} only incrementCountTotal works (the second argument)

If I write it inline with a function like this

onClick={event => {
  this.incrementCount;
  incrementCountTotal;
}}

Nothing works.

If I write a function to handle both it gives me undefined

  onClick(event) {
    incrementCountTotal, incrementCount;
  }

and put onClick={this.onClick} I get:

./src/components/pages/projectpages/dnd2/Counter.js
  Line 97:  'incrementCountTotal' is not defined  no-undef
  Line 97:  'incrementCount' is not defined       no-undef

Answer 1

In the child component, seems like you just need to call the functions (add parentheses). Also, the incrementCountTotal is a prop, so call it this way:

  onClick={event => {
    this.incrementCount();
    this.props.incrementCountTotal();
  }
}