如何在 React 中更改元素的样式？

Question

我是 Reactjs 的新手，我的 render 方法中有一个 td ：

 <td style={{cursor: 'pointer'}} onClick={} key={i}>

单击此 td ，我想更改其样式，应该如何在 React js 中执行此操作？

谢谢。

编辑：

这就是我通过 td 生成的方式：

 {this.props.posts.map((service, i) =>
     <tr>
        <td style={{cursor: 'pointer'}} key={i}>
           <span> {posts.createdBy} </span>
        </td>
     </tr>
)}

原文由 karthick krishna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当然假设所有其他鸭子都按顺序排列，您可以跟踪组件状态中的类，然后使用 onClick 事件中的逻辑更新状态。

 var TableData = React.createClass({
  getInitialState: function() {
    return {
      class: 'pointer'
    };
  },
  changeStyle: function(e) {
    if (this.state.class === 'pointer') {
      this.setState({class: 'not pointer'});
    } else {
      this.setState({class: 'pointer'});
    }
  },
  render: function() {
    return (
      <td style={ cursor: {this.state.class} }
          onClick={this.changeStyle}
          key={i}>
      </td>
    );
  }
});

原文由 Jonah Williams 发布，翻译遵循 CC BY-SA 3.0 许可协议