Css 如何使用React更改选定表行的背景色

我想在单击时更改表格行的背景颜色，并将其恢复为单击另一行时的原始颜色

我试过这样的方法：

index.js

state = {
    color: []    
  }



render(){    
 return (
        <Table>
          <thead>
            <tr>
              <th>name</th>
              <th>age</th>
              <th>address</th>
            </tr>
          </thead>
          <tbody className="tableHover">
            {this.props.students.map((item, i) => {
              return (
                <tr key={i} onClick={this.changeColor(i)}>
                  <td>{item.name}</td>
                  <td>{item.age}</td>
                  <td>{item.address}</td>
                </tr>
              );
            })}
          </tbody>
        </Table>
    );

    changeColor = (selectedRow) => e => {
      if (selectedRow){
       this.setState({color: 'blue'})
      }
    }
}

---

提前谢谢

您可以将索引设置为您的状态，如果索引等于设置的值，则按如下方式添加颜色：

class YourComponent extends Component {
  state = {
    isActive: null
  };

  toggleActive = i => {
    //Remove the if statement if you don't want to unselect an already selected item
    if (i === this.state.isActive) {
      this.setState({
        isActive: null
      });
    } else {
      this.setState({
        isActive: i
      });
    }
  };

  render() {
    return (
      <Table>
        <thead>
          <tr>
            <th>name</th>
            <th>age</th>
            <th>address</th>
          </tr>
        </thead>
        <tbody className="tableHover">
          {this.props.students.map((item, i) => {
            return (
              <tr
                style={
                  this.state.isActive === i
                    ? { background: 'green' }
                    : { background: 'yellow' }
                }
                key={i}
                onClick={() => this.toggleActive(i)}
              >
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>{item.address}</td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    );
  }
}

class YourComponent扩展组件{
状态={
isActive:空
};
toggleActive=i=>{
//如果不想取消选择已选项目，请删除if语句
if（i==this.state.isActive）{
这是我的国家({
isActive:空
});
}否则{
这是我的国家({
i:我
});
}
};
render（）{
返回(
名称
年龄
地址
{this.props.students.map（（项目，i）=>{
返回(
这个.toggleActive（i）}
>
{item.name}
{item.age}
{item.address}
);
})}
);
}
}

您可以在

状态下维护
selectedRow
，并根据匹配索引将类名添加到行中

className={this.state.selectedRow === i ? "tableSelected" : "" }

完整的工作代码如下
类应用程序扩展了React.Component{
状态={
selectedRow:-1
};
render（）{
返回(
名称
年龄
地址
{this.props.students.map（（项目，i）=>{
返回(
{item.name}
{item.age}
{item.address}
);
})}
);
}
changeColor=selectedRow=>e=>{
如果（selectedRow！==未定义）{
this.setState（{selectedRow}）；
}
};
}
ReactDOM.render（，document.getElementById（“app”）
.tableHover:hover{
颜色：白色；
背景颜色：蓝色；
}
.当选{
背景颜色：蓝色；
}
当组件再次渲染时，将您在状态中设置的索引与映射函数的索引进行比较。如果它们相同，则添加一个样式对象或类，通过CSS添加颜色。
className={this.state.selectedRow === i ? "tableSelected" : "" }