如何在 Reactjs 中给两个组件自己的状态？

Posted 2023-02-23

【中文标题】如何在 Reactjs 中给两个组件自己的状态？

【英文标题】：How to give two components their own State in Reactjs?

【发布时间】：2017-11-10 17:11:22

【问题描述】：

我有两个按钮，点击后会更新计数器。我希望每个按钮都更新自己的计数器。我怎样才能给每个按钮自己的状态，但同时使用相同的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

【问题讨论】：

如果您使用 UpVote 组件中的 upVote 方法，您将始终增加 UpVote 组件的状态。那么您如何想象对每个 Button 进行单独计数但在两个组件中都保留此方法？

这就是我问这个问题的原因。我是 reactjs 新手。

【参考方案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