javascript - ReactJS:根据按钮内的文本更改按钮悬停属性
问题描述
我正在开发一个 React 应用程序,我正在使用 Redux 来存储状态。我有以下代码:
request.component.jsx:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Loading from '../loading/loading.component';
import { changeRequestStatus } from '../../redux/requests/requests.actions';
import { RESOLVED, AWAITING_WAIT_STAFF } from '../../redux/requests/requests.status-types'
import './request.styles.scss';
class Request extends Component {
state = { isLoading: false }
render() {
const { _id, table_no, timestamp, description, status } = this.props.request;
const { user, changeRequestStatus } = this.props;
return (
<>
{this.state.isLoading ? <Loading /> : null}
<div className="request-box">
<div className="request-details">
<div>
<h1 style={{ color: status === AWAITING_WAIT_STAFF ? "#28bfa6" : "#f5a953" }}>Table {table_no}, {new Date(timestamp).toLocaleString()}</h1>
<h2>{description}</h2>
</div>
<div className="status-button">
<button
className="request-button"
onClick={async () => {
this.setState({ isLoading: true })
await changeRequestStatus(_id, status === AWAITING_WAIT_STAFF ? user.username : RESOLVED)
this.setState({ isLoading: false })
}} style={{ background: status === AWAITING_WAIT_STAFF ? "linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%)" : "linear-gradient(to right, rgba(255,213,94,1) 0%, rgba(246,170,123,1) 100%)" }}>
{status}
</button>
</div>
</div>
</div>
</>
)
}
}
const mapStateToProps = (state) => {
return {
requests: state.requests.requests,
user: state.user.currentUser
}
}
export default connect(mapStateToProps, { changeRequestStatus })(Request);
request.styles.scss:
.request-box {
border: 1px solid #c3c9c8;
height: 200px;
max-width: 100%;
border-radius: 5px;
position: relative;
background-color: white;
font-family: Helvetica;
box-shadow: 0 10px 6px -6px #ededed;
margin: 10px;
}
.request-details {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0 30px;
height: 100%;
h1 {
font-size: 30px;
color: #28bfa6;
text-align: left;
}
h2 {
font-size: 22px;
text-align: left;
}
}
.status-button {
padding-bottom: 25px;
width: 100%;
@media (min-width: 1000px) {
width: auto;
padding-right: 20px;
padding-left: 100px;
}
}
.request-button {
height: 50px;
font-size: 19px;
font-weight: 600;
border: none;
border-radius: 5px;
padding: 10px 25px;
background-size: 150% auto;
background: linear-gradient(to right, rgba(141,227,227,1) 0%, rgba(114,240,218,1) 100%);
cursor: pointer;
&:hover {
background: #2de1c2;
}
}
在我的请求组件中,我正在根据变量的值更改 div 的background
属性。request-button
status
但是,我想request-buttton:hover
根据我的请求组件中状态变量的值来更改属性。
我不确定实现这一点的正确语法是什么。任何见解都值得赞赏。
解决方案
为每个按钮颜色/状态创建不同的 CSS 类。然后在状态更改时使用三元运算符将 CSS 类应用于按钮。通过 Redux 检查状态,然后像这样应用 CSS className 。
推荐阅读
- r - 在 R 中创建一个长字符串向量
- java - java中的.net json属性转换-@JsonProperty
- azure - 设置静态主机名应用服务控制台 Azure
- azure - 更新应用设置时 Azure Functions 是否会引发 503 错误?
- python - 根据另一个数据帧对一个数据帧中的数据进行排序的最佳方法是什么?
- excel - Excel 不断被 ms 访问 vba 代码锁定
- c++ - 因超时而终止?如何提高 DFS
- python - 根据另一个数据框的日期和值创建数据框
- javascript - 如何保证一个 ajax 调用在调用另一个之前完成?
- twilio - 提取 Twilio Whatsapp 调查日志