React。 onClickで複数のイベントハンドラを呼び出すと、 "Null"または "undefined"が返されます

Question

2つのイベントハンドラがコンポーネント内にあります（子は "counter.js"と呼ばれ、親は "parent"コンテナです）。 js "）

私はイベントonClickに渡したいと思いますが、私は一度に1つずつ作業することしかできません。私は両方のイベントを保持し、そのonClickを使用する関数を記述しようとしましたが、エラーが発生します。

両方のイベント機能は、どちらか一方だけを使用すると検索しますが、両方を使用すると中断する傾向があります。私が間違っていることの目の第二のセットを得ることができますか？私の親コンポーネント（container.js）で

私は小道具としてこれを渡します

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; 

はその後、私の子コンポーネントに私はonClickのエリア上の2つのイベントを配置するが、彼らは壊れます。 （現在、私は唯一のonClickで一つのイベントがあるが、私は私が追加したときに両方this.incrementCountとincrementCountTotalはのonClickを（incrementCountTotalがthis.incrementCountが

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; 

ので、子コンポーネントである、親からある仕事したい：

を

onClick={(this.incrementCount, incrementCountTotal)}のみincrementCountTotal作品（第二引数）

私はこの

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

のような機能をインラインでそれを記述する場合

何も機能しません。あなただけの関数を呼び出す必要がありますように、子コンポーネントで

./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

、そうです：私が処理するための機能を記述する場合

は両方とも、それは私が未定義

onClick(event) { 
    incrementCountTotal, incrementCount; 
    } 

と私が得るonClick={this.onClick}を置くが与えます（かっこを入れる）。また、incrementCountTotalは小道具なので、次のように呼び出します。

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