我创建了一个隐藏了复选框的盒子/卡片。所以,如果我悬停
这张卡片,就会显示复选框。如果复选框被选中
,它必须始终可见。如果 checked
为 false,它将恢复为默认行为。
我正在使用悬停礼仪来显示我的复选框:
使用 material ui 的 CSS:
hideCheckbox: {
display: 'none',
},
showCheckbox: {
display: 'initial',
},
我的主课:
export class Item extends Component {
state = {
isHovering: true,
checkboxChecked: false,
}
handleGetCardSelected = (id, checked) => {
//Here I set isHovering to display my checkbox
//checkboxChecked is a control variable to always display the checkbox if it's checked
if(checked){
this.setState({
isHovering: !this.state.isHovering,
checkboxChecked: true,
})
} else {
this.setState({
checkboxChecked: false,
})
}
}
handleMouseHover = () => {
if(!this.state.checkboxChecked){
this.setState(this.toggleHoverState);
}
}
toggleHoverState = (state) => {
return {
isHovering: !state.isHovering,
};
}
return(
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
<div className={`
${this.state.isHovering && classes.hideCheckbox }
${this.state.checkboxChecked && classes.showCheckbox}
`}>
<CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
</div>
</div>
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
<div className={`
${this.state.isHovering && classes.hideCheckbox }
${this.state.checkboxChecked && classes.showCheckbox}
`}>
<CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
</div>
</div>
<div
onMouseEnter={this.handleMouseHover}
onMouseLeave={this.handleMouseHover}
>
<div className={`
${this.state.isHovering && classes.hideCheckbox }
${this.state.checkboxChecked && classes.showCheckbox}
`}>
<CheckBoxCard handleGetCardSelected={this.handleGetCardSelected}/>
</div>
</div>
)
}
我的复选框卡片:
import React from 'react';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import { Checkbox } from '@material-ui/core';
const GreenCheckbox = withStyles({
root: {
color: '#43a04754',
'&$checked': {
color: '#43a047',
},
'&:hover': {
color: '#43a047',
backgroundColor: 'initial',
},
},
checked: {},
})(props => <Checkbox color="default" {...props} />);
export default function CheckBoxCard(props){
const [state, setState] = React.useState({
idItem: false,
});
const handleCheckbox = name => event => {
setState({ ...state, [name]: event.target.checked });
let id = name
let checked = event.target.checked
props.handleGetCardSelected(id, checked)
};
return(
<GreenCheckbox
checked={state.idItem}
onChange={handleCheckbox('idItem')}
value="idItem"
inputProps={{
'aria-label': 'primary checkbox',
}}
/>
);
}
默认情况下,我的复选框是隐藏的,因为我的 state
isHovering
为 true,因此设置了 css 变量 hideCheckbox ('display: none')。
如果我将鼠标悬停在元素上,将调用 handleMouseHover
并显示复选框!
如果我选中我的复选框,它必须始终显示!我创建了一个 checkboxChecked
来控制它。如果 true
我总是显示我的复选框!但这并不完美,因为 checkboxChecked
每个元素必须是动态的,而不是唯一的。
那么,它必须如何工作?
-> 隐藏所有复选框(确定)
-> 悬停卡和复选框出现(确定)
-> 如果复选框被选中
,它必须忽略悬停
并始终显示
我在沙箱中上传了我的代码,pls click here to see how it works actually
我该怎么做?
最佳答案
默认情况下将 CSS 赋予框显示无。维护 2 状态 isHovered 和 isChecked 对于任何此状态为真,您可以为其提供显示 block 类。最好将卡片拆分成一个单独的组件,以便轻松维护状态。
工作代码已上传到沙箱:here
关于javascript - 如何以动态方式控制带有悬停(显示和隐藏)的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56795616/