Как динамически управлять элементом при наведении (отображать и скрывать)

Question

Я создаю коробку / карточку со скрытым флажком.Итак, если я hover этой карты, флажок отображается.Если флажок checked, он должен быть всегда видимым.Если значение checked равно false, оно возвращается к поведению по умолчанию.

Я использую свойство наведения мыши, чтобы отобразить мой флажок:

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>
 )
 }

Моя CheckboxCard:

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 должен быть динамическим для каждого элемента, а не уникальным.

Итак, как это должно работать?

-> Все флажки скрыты (нормально)
-> Карта наведения и флажок появляется (хорошо)
-> Если флажок checked, он должен игнорировать hover и всегда отображаться

Я загрузил свой код в песочницу, пожалуйста, нажмитездесь, чтобы увидеть, как это работает на самом деле

Как я могу это сделать?

Answer 1

Дать CSS для отображения не по умолчанию. поддержание 2 состояния isHovered и isChecked для любого из этих состояний - true, вы можете присвоить ему класс блока отображения. Лучше разделить карту на отдельный компонент, чтобы легко было поддерживать состояние.

рабочий код загружен в песочницу: Пожалуйста, примите этот ответ, если это решение решило вашу проблему