如何通过反应处理多个按钮的状态？

Posted 2023-02-22

【中文标题】如何通过反应处理多个按钮的状态？

【英文标题】：How to handle state of multiple buttons with react?

【发布时间】：2018-01-07 07:09:33

【问题描述】：

我有一个引导网格，其中每个网格项都是从一组对象中填充的，但是在每个网格项之后我想有一个投票按钮。我如何通过分别维护每个按钮的状态来实现这一点，即当单击按钮 1 时，文本应从“投票”变为“已投票”，而其他文本仍保留为“投票”。

当一个按钮被点击的那一刻，它们都变成了'Voted'

class Items extends Component 
    constructor(props) 
        super(props);
        this.state =  hasVoted: false ;

        this.OnClick = this.OnClick.bind(this);
    

    OnClick() 
        this.setState(prevState => (
            hasVoted: !prevState.hasVoted
        ));
    

    render() 
        const Item = teasers.items.map(item =>
            <Col key=item.nid>
                <span>
                    itemType
                </span>

                <a href=item.path>
                    <Image src=item.image.src title=item.productType />
                    <span>
                        item.Title
                    </span>
                    <div className=teasersStyle.copy>
                        " "item.Copy>
                    </div>
                </a>

                <div
                    className=this.state.hasVoted ? "active" : "notactive"
                    onClick=this.OnClick
                >
                    this.state.hasVoted ? "Voted" : "Vote"
                </div>
            </Col>
        );
        return (
            <div>
                <Grid>
                    <Row>
                        Item
                    </Row>
                </Grid>
            </div>
        );
    


export default Items;

【问题讨论】：

使hasVoted成为每个项目的属性。

@IngoBürk 不确定我完全理解你的意思。像这样： hasVoted = this.state.hasVoted

您可以使您的按钮有状态，也可以将它们的hasVoted 状态存储为Items 状态作为布尔数组，其索引与teasers.items 中的按钮索引匹配。然后在映射teasers.items.map((item, index) =>...) 时，可以使用索引访问hasVoted 状态并将属性应用到按钮。顺便说一句：您使用的是this.handleOnClick，但您的方法名为OnClick()。

【参考方案1】：

我为你创建了一个简单的例子：

class App extends React.Component 
    constructor() 
        super();
        this.onClick = this.onClick.bind(this);
        this.state = 
            arr: [
                 name: "first", isActive: true ,
                 name: "second", isActive: true ,
                 name: "third", isActive: true ,
                 name: "fourth", isActive: true 
            ]
        ;
    
    onClick(index) 
        let tmp = this.state.arr;
        tmp[index].isActive = !tmp[index].isActive;
        this.setState( arr: tmp );
    
    render() 
        return (
            <div>
                this.state.arr.map((el, index) =>
                    <div key=index onClick=() => this.onClick(index)>
                        name: el.name / isActive: el.isActive ? "true" : "false"
                    </div>
                )
            </div>
        );
    

检查fiddle 并在您的情况下实施它。

另一种处理方法是将活动按钮的索引保持在状态：

class App extends React.Component 

state = 
    users: [
     name: "John" ,
     name: "Sarah" ,
     name: "Siri" ,
     name: "Jim" ,
     name: "Simon" ,
  ],
  activeIndex: 0,


render() 
    const  users, activeIndex  = this.state;

    return (
      <div>
        users.map((u, i) => (
          <div
            className=i === activeIndex ? 'active' : ''
            onClick=() => this.setState( activeIndex: i )
            key=u.name
          >
            u.name
          </div>
        ))
      </div>
    )
  

https://jsfiddle.net/846tfe3u/

【讨论】：

谢谢 Andrew，效果很好，但是有没有一种简单的方法可以在点击时让所有其他人都为假？

非常感谢安德鲁

有没有办法将此解决方案应用于动态数量的组件？

@guygrinberger 您可以将活动按钮的索引保持在状态：buttons.map((button, index) => <Button active=this.state.activeIndex === index onPress=() => this.setState( activeIndex: index ) name=button.name />) 我只是从头开始写的，所以这只是一个方向:)

@Andrew 非常感谢！