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

How to change the style of an element in React?

提问by karthick krishna

I'm very new to Reactjs, and I have an tdin my rendermethod:

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

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

On click of this td, I want to change its style, how one should do this in react js?

点击这个td，我想改变它的风格，在react js中应该如何做到这一点？

Thanks.

谢谢。

Edited:

编辑：

This is how I have generated by td:

这就是我生成的方式td：

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

回答by Jonah Williams

Supposing of course that all the other ducks are in order, you can keep track of the class in the components state, and then update the state with logic in the onClick event.

当然假设所有其他鸭子都按顺序排列，您可以在组件状态中跟踪该类，然后在 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>
    );
  }
});

回答by reuvenaor

You can easily inject the inline style updated state or any CSS object representative.

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

Combine it with with static CSS class (ClassName in the expamle).

将其与静态 CSS 类（示例中的 ClassName）结合使用。

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

CSS object injected with any trigger you choose:

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

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

Or with updated state triggered with setState():

或者使用 setState() 触发更新状态：

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

回答by dabeng

@karthick krishna .I create a demo according to your question. td will be selected on user clicks the date column of Post List.

@karthick krishna。我根据您的问题创建了一个演示。td 将在用户单击 Post List 的日期列时被选中。

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>

回答by thuva4

Don't use the inline styles, inline styles are too expensive. Use default .css.

不要使用内联样式，内联样式太昂贵了。使用默认.css.

table.css : Maintain two classes

table.css ：维护两个类

.td {cursor: 'pointer'}

.td-clicked {
 //your classAtributes
}

index.js: Maintain the unique key for each td. If the user clicked the one td use the onClick listener to change the class of that particular td.

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

import React, { useState } from "react";
import './table.css';
const Table = () => {
  const [clickTd, setClickedTd] = useState(null);
  return (
    <>
      {this.props.posts.map((service, i) => {
        return (
          <tr>
            <td
              className={clickId == i ? "td-clicked" : "id"}
              key={i}
              onClick={() => setClickId(i)}
            >
              <span> {posts.createdBy} </span>
            </td>
          </tr>
        );
      })}
      )}
    </>
  );
};