如何用React处理多个按钮的状态？

我为您创建了一个简单的示例：

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>        );    }}

检查小提琴并根据您的情况实施。

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

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/