Question

我正在尝试创建一个React应用程序，它列出了Db内容，更具体的信用卡数据，存储在数据库中。

到目前为止，我有以下内容：

ExistingCardList类

class ExistingCardList extends React.Component {
    constructor() {
    super();
        this.state = {
            data : [],
            mouseOverIndex: null,
            clickedIndex: null,
            amount: null
       }
    }

  onMouseOver (index) {
    this.setState({
      mouseOverIndex: index
    })
  }

  onMouseOut (index) {
    this.setState({
      mouseOverIndex: index
    })
  }

  onClickHandler (index) {
    this.setState({
      clickedIndex: index
    })
  }

componentDidMount() {
    fetch('http://localhost:3000/bla/blabla')
        .then((response) => response.json())
        .then((findResponse) => {
            console.log(findResponse)
            this.setState({
                data : findResponse,
            })
        } )
}

render() {
    let id = 0;

    return(
       <div>
            {
              this.state.data.map((dynamicData, key) =>
                <div style={{'padding': '2px 16px'}}>
                  <ClickableBox
                    title={dynamicData.cardholder}
                    body= {['**** **** **** ', dynamicData.card_identifier]}
                    footer={dynamicData.expiration}
                    onMouseOver={this.onMouseOver.bind(this, ++id)}
                    onMouseOut={this.onMouseOut.bind(this, 0)}
                    onClick={this.onClickHandler.bind(this, id)}
                    mouseOver={this.state.mouseOverIndex === id}
                    clicked={this.state.clickedIndex === id}
                   />
                </div>
                )
            }
        </div>
    )
  }
}


export default ExistingCardList;

和 ClickableBox类

export default class ClickableBox extends React.Component {

  render () {
  let style = {
     ...STYLE.box,
     ...STYLE.disableSelect,
     ...(this.props.mouseOver ? STYLE.boxMouseOver : null)
   };

 style = {
  ...STYLE.box,
  ...(this.props.clicked ? STYLE.boxClicked : style)
};

return (
  <div style={style} onMouseOver={this.props.onMouseOver} onClick={this.props.onClick}>
    <span style={STYLE.title}>{this.props.title}</span>
    <hr style={STYLE.hLine} />
    <span style={STYLE.body}>{this.props.body}</span><br />
    <hr style={STYLE.hLine} />
    <span style={STYLE.footer}>{this.props.footer}</span>
  </div>
  )
 }
}

这看起来像这样：

有没有办法将两张卡片的颜色从蓝色改为灰色，因为它们的有效期是过去的？不幸的是，我无法合并这两个类，并且不知道在哪里编写将检查日期的函数...

可以请任何人帮忙吗？谢谢....

Answer 1

如果this.props.footer是日期..

style={"is this.props.footer in past" ? expiredStyle : style}

编辑：

好的...因为this.props.footer是一个日期字符串，你可以这样做：

style={new Date(this.props.footer.substring(3) + '-' + this.props.footer.substring(0,2)) < new Date(new Date().getFullYear() + '-' + (new Date().getMonth() + 1)) ? expiredStyle : style}

解释我的代码：

您为组件提供的道具的日期为字符串。你必须解析它到一个日期。然后你可以从今天开始计算并比较它们。如果日期是过去的日期，则会为样式属性expiredStyle（如果不是）提供正常style。此外，您必须创建一个expiredStyle变量。

这段代码并不完美。只是一种解决问题的方法。

如果过期日期已过去，则更改样式 - React JS

1 个答案: