Question

我对Reactjs很新，我的td方法中有一个render：

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

点击这个td，我想改变它的风格，应该如何做出反应js？

感谢。

编辑：

这是我td生成的方式：

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

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

Answer 2

您可以轻松地插入内联样式更新状态或任何CSS对象代表。

使用静态CSS类（在示例中为ClassName）将其组合。

    constructor(props) {
    super(props);
    this.filters = {filter: 'blur(5px)'};
    this.state = {
        filters: {filter: 'blur(5px)'}
    };
}

CSS对象注入了您选择的任何触发器：

<img src="/static/back.jpg" className={'background'} style={this.filters}></img>

或者使用setState（）触发更新状态：

<img src="/static/back.jpg" className={'background'} style={this.state.filters}></img

Answer 3

@karthick krishna。我根据您的问题创建了一个演示。当用户单击“发帖列表”的日期列时，将选择td。

class PostList extends React.Component {
  constructor() {
    super();
    this.state = { selectedPost: {} };
  }
  render() {
    return (
      <table>
        {this.props.posts.map(post => (
          <tr key={post.id}>
            <td>{post.title}</td>
            <td
              className={
                this.state.selectedPost.id === post.id ? "selected" : ""
              }
              onClick={this.selectPost.bind(this, post)}
              style={{ cursor: "pointer" }}
            >
              <span>{post.createdBy}</span>
            </td>
          </tr>
        ))}
      </table>
    );
  }

  selectPost(selected) {
    if (selected.id !== this.state.selectedPost.id) {
      this.setState({ selectedPost: selected });
    } else {
      this.setState({ selectedPost: {} });
    }
  }
}

const postData = [
  { id: "1", title: "jQuery is great", createdBy: "2019-01-15" },
  { id: "2", title: "ES6 is cool", createdBy: "2019-02-15" },
  { id: "3", title: "Vuejs is awesome", createdBy: "2019-03-15" }
];
const element = (
  <div>
    <h1>Post List</h1>
    <PostList posts={postData} />
  </div>
);
ReactDOM.render(element, document.getElementById("root"));

.selected {
  background-color: rgba(217, 83, 79, 0.8);
}

<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="root"></div>

Answer 4

请勿使用内联样式，内联样式过于昂贵。使用默认的<script>。

table.css：维护两个类

<script src="js/bootstrap.min.js"></script>

index.js：维护每个.css的唯一密钥。如果用户单击了一个td，则使用onClick侦听器更改该特定td的类。

.td {cursor: 'pointer'}

.td-clicked {
 //your classAtributes
}

Answer 5

您实际上可以使用 React.createRef 以编程方式执行此操作，然后使用函数使用 referencedElement.style.someStyle = style 更改元素。

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

编辑：

5 个答案: