javascript - 如何以动态方式控制带有悬停(显示和隐藏)的元素

Question

我创建了一个隐藏了复选框的盒子/卡片。所以，如果我悬停这张卡片，就会显示复选框。如果复选框被选中，它必须始终可见。如果 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

我该怎么做？

Answer 1

默认情况下将 CSS 赋予框显示无。维护 2 状态 isHovered 和 isChecked 对于任何此状态为真，您可以为其提供显示 block 类。最好将卡片拆分成一个单独的组件，以便轻松维护状态。

工作代码已上传到沙箱:here