javascript - 中的每个 如何才能在不影响其他 的情况下更改其类名？

Question

这里将会有异常数量的代码，因为我试图分享正在发生的一切。

我想做的是......在列表中:

1. 将服务标记为完成。
2. 更改颜色并在完成后隐藏。
3. 按下按钮即可显示隐藏的服务。

我设法隐藏每个单独的服务，但无法使用隐藏/显示所有已完成服务的按钮。

我有一个上下文提供程序:

const ContextBooking = React.createContext()

const ContextProviderBooking = ({ children }) => {
  const [isHidden, setIsHidden] = useState(false); //sharing among both components to hide/show list

  return <ContextBooking.Provider value={{ isHidden, setIsHidden }}>
    {children}
  </ContextBooking.Provider>
}
export { ContextBooking, ContextProviderBooking }

它正在另一个文件中的 BookingsDisplay 组件上传递

...
<ContextProviderBooking>
      <BookingsDisplay /> //this encapsulates each <Booking />
</ContextProviderBooking>
...

我正在一个名为“BookingsDisplay”的较大组件中呈现每项服务

const BookingsDisplay = () => {
  const { isHidden, setIsHidden } = useContext(ContextBooking)  
  const display = day => //function that displays each service according to the day it was booked for
    allBookings.map( //allBookings is a json file
      item =>
        item.day === day && ( 
          <Booking
            isHidden={isHidden}
            completed={item.completed} //comes from json file, all default to false
            key={item.id}
            id={item.id}
            time={item.time}
            name={item.name}
            date={item.date} 
          />
        )
    )
  return (
    <div className="bookings">
      <h2 className="ib">Next bookings</h2>
      <button //This won't work as expected and hide/show all of the 'completed' bookings
          onClick={() =>{ 
            setIsHidden(!isHidden);}
      }>
          Show hidden  
      </button>
      <h2>Today</h2>      
      <ul> {display('today')} </ul>
      <h2> Tomorrow </h2>
      <ul> {display('tomorrow')} </ul>
      <h2> General </h2>
      <ul> {display('other')} </ul>
    </div>
  )
}

每个“预订”组件都有一个按钮，用于将服务标记为完成。这是通过有条件地更改每个组件的类来实现的。就我而言，这工作得很好

const Booking = (props) => {
  const [isHidden, setIsHidden] = useState(props.isHidden)
  console.log(props.isHidden) // will output true or false 16 times(there are 16 component in total)
  const [isCompleted, setIsCompleted] = useState(props.completed);
  return (
    <li
      className={
        isCompleted && isHidden ? 'booking-complete hide' //class names are not changing individually
        : isCompleted ? 'booking-complete'                //if button is pressed on one of them,
        : 'booking'                                       //it may affect the other
      }
      key={props.id}
      id={props.id}>
      <h3>{props.date}</h3>
      <h4>{props.time}</h4>
      <h5>{props.name}</h5>
      <button
        onClick={() => { //shouldn't this button work of each li and not sometimes all of them?
          if (!isCompleted && !isHidden) { 
            setIsCompleted(!isCompleted); //this changes color of the service as className changes
            setTimeout(() => setIsHidden(!isHidden), 200) //after a short time it is hidden
          }
          else if (isCompleted && !isHidden) {
            setIsCompleted(!isCompleted);
          }
          else {
            setIsCompleted(!isCompleted);
            setIsHidden(!isHidden);
          }
        }}>
        {!isCompleted ? `Completed` : `Not complete`}
      </button>
    </li>
  )
}

Answer 1

您的应用中有两种 isHidden。我会将上下文中的一个称为全局隐藏 isAllHidden ，将 <Booking /> 中的一个称为本地隐藏 isHidden 。

问题是你滥用了两者。 本地隐藏是 <Booking /> 的内部状态。它存在的原因是因为你需要 200ms 的动画延迟，否则可以用 isCompleted 代替。因此它应该源自 isCompleted 而不是 isAllHidden 。

修复1:

const Booking = (props) => {
  const [isHidden, setIsHidden] = useState(props.completed)
}

现在，全局隐藏和本地隐藏结合起来决定是否应该隐藏预订。你的逻辑应该反射(reflect)这个事实。

修复2:

  const shouldBeHidden = Boolean(props.isAllHidden && isHidden)

  return (
    <li
      className={
        isCompleted && shouldBeHidden ? 'booking-complete hide' 
        : isCompleted ? 'booking-complete'on one of them,
        : 'booking'other
      }
    >
  ...

放在一起:

const Booking = (props) => {
  const [isHidden, setIsHidden] = useState(props.completed)
  const [isCompleted, setIsCompleted] = useState(props.completed)

  const shouldBeHidden = props.isAllHidden && isHidden

  return (
    <li
      className={
        isCompleted && shouldBeHidden ? 'booking-complete hide' //class names are not changing individually
        : isCompleted ? 'booking-complete'                //if button is pressed on one of them,
        : 'booking'                                       //it may affect the other
      }
    >
      <input type='checkbox' checked={isCompleted} onChange={() => {
        setIsCompleted(!isCompleted)
        setTimeout(() => setIsHidden(!isHidden), 200)
      }}/>
      <span>{props.name}</span>
    </li>
  )
}

我在这里设置了一个 demoboard 来显示结果。