单击 btn 而不触发 div 单击未按预期工作

代码沙盒：https://codesandbox.io/s/currying-breeze-depdc9?file=/package.json https://codesandbox.io/s/currying-breeze-depdc9?file=/package.json

我有一个 Card 组件，它有 4 种潜在状态：“活动”、“选定”、“丢弃”、“完成”。根据状态，我需要显示不同的 css 类。

通过单击卡的特定部分来设置状态，每个部分都是一个“切换”（单击一次设置它，另一次单击“取消设置”它）：

• 默认状态为活动状态，
• 如果用户单击卡上的任意位置，它就会被“选中”，并且卡内会出现两个按钮（“后退”、“放弃”）。
• 如果用户单击“后退”，我需要将状态切换为“活动”。
• 如果用户单击“丢弃”，我需要将状态设置为“丢弃”

状态存储在“应用程序”级别，我通过 props 将其传递给组件。这意味着为了更新状态，我将一些“处理程序”从应用程序传递到组件（SelectCard、DiscardCard）

下面是我的代码。

我可以通过该功能切换“活动”-->“选择”-->“活动”SelectCard.

但是，我做错了，因为我无法点击“放弃”来实际调用DiscardCard功能。

我的感觉是，这与 btn 位于 div 内部这一事实有关，并且我有一个用于调用的 div 的“onClic”SelectCard所以当我点击“discard btn”时，就像我也点击了div，但事情不起作用。

但也许是别的东西。没有把握。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import Card from './components/Card'
import data from "./assets/data.json"
import {nanoid} from "nanoid"

function App() {
  const [people, setPeople] = useState(data['people'].map(
    el=>{
      return {
        ...el,
        'key' : nanoid(),
      }
    }
  ))

  const [myCard, setMyCard] = useState(
    {
      "name":"Name and Surname",
      "img":"https://i.picsum.photos/id/1070/200/300.jpg?hmac=dJNTYlLwT_0RupxbJNbw5Wj-q2cCTB4Xh-GqWRofIIc",
      "description": "This is a silly descriptionhis is a silly descriptionhis is a silly description",
      'key' : nanoid(),
      "selected":false,
      "active":true,
    }
  )


  function SelectCard(CardKey){
    console.log('SelectCard')
    setPeople(oldPeople=>{
      return oldPeople.map(el=>{

        return el.key === CardKey
                ? { ...el, 'state': el.state === 'active'?'selected': 'active'}
                : { ...el, 'state':'active'}
          })
    })
  }

  function DiscardCard(CardKey){
    console.log('DiscardCard')
    setPeople(oldPeople=>{
      return oldPeople.map(el=>{
        return el.key === CardKey
                ? { ...el, 'state': el.state === 'discarded'?'active': 'discarded'}
                : { ...el}
          })
    })
  }

  const cards = people.map(el=>{
    return <Card 
            key = {el.key} 
            item={el} 
            onPress={()=>SelectCard(el.key)}
            onDiscard={()=>DiscardCard(el.key)}
          />
  })

  
  return (
    <div className="App">
      <div className='container'>
        <div className='left'>
          <div className='cards'>
            {cards}
          </div>
        </div>
        <div className = 'right'>
          <h4>You are: </h4>
          <Card key = {myCard.key} item={myCard}/>
        </div>
     </div>
     
    </div>
  )
}

export default App

import { useState } from 'react'

function Card(props) {
  //const [count, setCount] = useState(0)

  function getClassName(state) {
    switch (state) {
      case "active":
        return "";
      case "selected":
        return "overlay-selected";
      case "discarded":
        return "overlay-discarded";
      case "complete":
        return "overlay-complete";
      default:
        return "";
    }
  }

  

  const className = `card ${getClassName(props.item.state)}`

  return (
    <div 
        className={className} 
        onClick={(event)=>{
            props.onPress()}}>
        <img className='card-img' alt='Card Image' src={props.item.img} />
        <h3 className='card-title'>{props.item.name} </h3>
        { props.item.state === 'selected' ? 
        
            <div className='card-cta'>
                <button 
                    className='btn btn-back'
                    onClick={ props.item.selected ?  (event)=>
                        { 
                            props.onPress
                            //event.stopPropagation()
                        }
                         : ()=>{}}
                >Back</button>
                <button 
                    className='btn btn-discard'
                    onClick={ 
                        (event) =>{
                            //event.stopPropagation()
                            props.onDiscard
                            }
                        }
                >Discard</button>
            </div>
        : 
        <p className='card-description'>{props.item.description} </p>  
    
        }
        
    </div>
  )
}

export default Card

为了阻止事件冒泡到其他处理程序，您需要调用stopPropagation关于活动。

然后，正如另一个问题中提到的，您需要实际运行您传递的处理程序。为了调用代码块中的处理程序，您需要添加()在它的名字之后。

所以对于背部你需要

onClick={
  props.item.selected
    ? (e) => {
        e.stopPropagation();
        props.onPress();
      }
    : undefined
}

对于丢弃你想要的

onClick={(e) => {
  e.stopPropagation();
  props.onDiscard();
}}

Demo at https://codesandbox.io/s/competent-swartz-d05x9y https://codesandbox.io/s/competent-swartz-d05x9y