Блог

Я хочу изменить цвет фона строки таблицы при щелчке и вернуться к тому, что было изначально, когда щелкнула другая строка.

Я пробовал что-то вроде этого:

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

style.css

 .tableHover :hover {
  color: white;
  background-color: blue;
}
  

Заранее спасибо!

Вы можете сохранить a selectedRow в state и добавить имя класса в строку на основе соответствующего индекса.

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

Полный рабочий код ниже

 class App extends React.Component {
  state = {
    selectedRow: -1
  };

  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)} className={this.state.selectedRow === i ? "tableSelected" : "" }>
                <td>{item.name}</td>
                <td>{item.age}</td>
                <td>{item.address}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }

  changeColor = selectedRow => e => {
    if (selectedRow !== undefined) {
      this.setState({ selectedRow  });
    }
  };
}

ReactDOM.render(<App students={[{name: "a"}, {name: "b"}]}/>, document.getElementById("app"));  

 .tableHover :hover {
  color: white;
  background-color: blue;
}

.tableSelected {
  background-color: blue;
}  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>  

Вы можете просто установить индекс в свое состояние, и если индекс равен заданному, добавьте свой цвет следующим образом:

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