gpt4 book ai didi

javascript - 如何在 ReactJS 中根据状态变量的值分配 CSS 类

转载 作者:太空宇宙 更新时间:2023-11-03 21:13:31 24 4
gpt4 key购买 nike

我正在用 ReactJS 编写一个元素。我有一些可以被用户点击的 div。默认情况下,每个 div 的背景色都应设置为绿色,但在单击后它应该变为红色(意味着该特定 div 已被单击,再单击它不会有任何区别)。我设置 CSS 类的想法是,在 className 内部,我有一个基于数组中相应值的三元 if 语句。我提出的解决方案没有做任何事情,没有弹出任何错误。我怎样才能实现我的目标?

代码:

var style = require('./board.css');

var React = require('react');

class board extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {
fieldClicksArray: [
false, false, false,
false, false, false,
false, false, false
]
}
}

handleClick(index) {
if (this.state.fieldClicksArray[index] === false) {
this.state.fieldClicksArray[index] = true;
}

render () {
return (
<div className="parent">
<div className={this.state.fieldClicksArray[0] ? 'red' : 'green'} onClick={() => this.handleClick(0)}>1</div>
</div>//parent
)//return
}//render
}//class

export default board;

CSS:

.red {
background-color: red;
}

.green {
background-color: green;
}

最佳答案

您需要使用setState()。并克隆数组,这样你就不会改变以前的状态。最后,当你的下一个状态是从前一个状态计算出来的时,最好使用 setState() 的函数形式。

handleClick(index) {
this.setState((prevState) => {
// make a copy
let fieldClicksArray = prevState.fieldClicksArray.slice();
// change one item
fieldsClickArray[index] = true;
// return next state to be merged
return { fieldsClickArray };
});
}

阅读更多:https://facebook.github.io/react/docs/state-and-lifecycle.html#using-state-correctly

希望这对您有所帮助!

关于javascript - 如何在 ReactJS 中根据状态变量的值分配 CSS 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44219281/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com