我对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>
)}
答案 0 :(得分:2)
当然假设所有其他的鸭子都是有序的,你可以跟踪组件状态中的类,然后在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>
);
}
});
答案 1 :(得分:0)
您可以轻松地插入内联样式更新状态或任何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
答案 2 :(得分:0)
@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>
答案 3 :(得分:0)
请勿使用内联样式,内联样式过于昂贵。使用默认的<script>
。
table.css:维护两个类
<script src="js/bootstrap.min.js"></script>
index.js:维护每个.css
的唯一密钥。如果用户单击了一个td,则使用onClick侦听器更改该特定td的类。
.td {cursor: 'pointer'}
.td-clicked {
//your classAtributes
}
答案 4 :(得分:0)
您实际上可以使用 React.createRef 以编程方式执行此操作,然后使用函数使用 referencedElement.style.someStyle = style 更改元素。