Reactjsに2つのコンポーネントに独自の状態を与える方法は？

Question

私は、クリックするとカウンタを更新する2つのボタンがあります。私はそれぞれのボタンがそれ自身のカウンタを更新したいと思う。どのように各ボタンに独自の状態を与えることができますが、同時に同じonClickメソッドを使用しますか？

これまで私がこれまで持っていたことは？

import React from 'react' 
 
import Header from './Header' 
 
import {Jumbotron,Badge, Glyphicon, Media, PageHeader, Button} from 'react-bootstrap' 
 

 
class UpVote extends React.Component { 
 
    constructor(props) { 
 
    super(props) 
 
    this.state = { 
 
     count: 0 
 
    } 
 

 
    this.upVote = this.upVote.bind(this) 
 
    } 
 

 
    upVote() { 
 
    this.setState({ 
 
     count: this.state.count + 1 
 
    }) 
 
    } 
 

 

 
    
 
    render() { 
 
    const item = this.state.item 
 
    return (
 
     <div> 
 
     <Button bsStyle="success" onClick={this.upVote}> 
 
      {this.state.count} 
 
     </Button> 
 
     <hr /> 
 
     <Button bsStyle="success" onClick={this.upVote}> 
 
      {this.state.count} 
 
     </Button> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
export default UpVote

Answer 1

あなたは自身の状態を追跡し、新しいボタンコンポーネントを定義し、それを再利用することができます。

import React from 'react' 
import { Button} from 'react-bootstrap' 

class UpVoteButton extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     count: 0 
    } 

    this.upVote = this.upVote.bind(this) 
    } 

    upVote() { 
    this.setState({ 
     count: this.state.count + 1 
    }) 
    } 

    render() { 
    return (
     <Button bsStyle="success" onClick={this.upVote}> 
      {this.state.count} 
     </Button> 
    ) 
    } 
} 

export default UpVoteButton 

、元のコンポーネントで実行します。

import React from 'react' 
import UpVoteButton from './UpVoteButton' 

class UpVote extends React.Component { 

    render() { 
    return (
     <div> 
     <UpVoteButton/> 
     <hr /> 
     <UpVoteButton/> 
     </div> 
    ) 
    } 
} 

export default UpVote