为了账号安全,请及时绑定邮箱和手机立即绑定

根据react.js中的状态更改背景颜色

根据react.js中的状态更改背景颜色

哆啦的时光机 2023-07-06 10:16:05
我正在开发一个简单的应用程序,背景颜色应该根据季节而不同。到目前为止我已经写过:class App extends React.Component {  constructor() {    super();    this.state = {        backgroundColor: 'blue'    }  }    handleSeason = (time) => {    const months = [      'January',      'February'      'March',      'April',      'May',      'June',      'July',      'August',      'September',      'October',      'November',      'December',    ]    const month = months[time.getMonth()];    if (month === 'January' || month === 'February' || month === 'December') {      this.setState({backgroundColor: 'white'});    } else if      (month === 'March' || "April" || 'May') {      this.setState({ backgroundColor: 'yellow' });    } else if     (month==='June' || month ==='July' ||month ==='August'){      this.setState({ backgroundColor: 'green' });     } else {      this.setState({ backgroundColor: 'red' });    }  }  在渲染中,我返回以下 div:      <div className='app' style={{backgroundColor: this.state.backgroundColor }}>背景保持蓝色。我不确定问题出在哪里。控制台没有显示任何错误。任何提示将不胜感激。
查看完整描述

2 回答

?
沧海一幻觉

TA贡献1824条经验 获得超5个赞

我没有看到任何可以触发该handleSeason功能的东西......

也许尝试一下会很好:

componentDidMount() {
  this.handleSeason(new Date())
}


查看完整回答
反对 回复 2023-07-06
?
牛魔王的故事

TA贡献1830条经验 获得超3个赞

您需要在代码中修复两件事

第二个if块是这样的

(month === 'March' || "April" || 'May') {

这将始终将状态设置为黄色,因为字符串 April 和 May 将被视为 true,因此将其更改如下

   else if (month === "March" ||month ===  "April" ||month ===  "May") {

另请检查您是否正在调用handleSeason函数,如下所示

this.handleSeason(new Date());


查看完整回答
反对 回复 2023-07-06
  • 2 回答
  • 0 关注
  • 156 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信