Reactjs 如何从包含子元素的按钮中获取相同的ID，防止子元素单击？

我有一个按钮，它的背景颜色为

橙色

，然后子元素被标记为

红色

。当我点击橙色区域时，我得到了我想要的结果（元素的ID），但当我点击红色区域时，我没有得到ID（或目标元素）

如何将子项包装在按钮中，以便在单击按钮的任何位置时获得相同的ID（按钮元素）

const示例=（）=>{
返回(
console.log（e.target.id）}
>
按钮一
);
};
ReactDOM.render(
,
document.getElementById（“react”）
);
我认为没有人期待CSS提供解决方案

但您可以添加css和BOOM：

 pointerEvents : "none"


请运行下面的代码段，希望对您有所帮助：


const示例=（）=>{
返回(
console.log（e.target.id）}
>
按钮一
);
};
ReactDOM.render(
,
document.getElementById（“react”）
);
我认为没有人期待CSS提供解决方案

但您可以添加css和BOOM：

 pointerEvents : "none"


请运行下面的代码段，希望对您有所帮助：


const示例=（）=>{
返回(
console.log（e.target.id）}
>
按钮一
);
};
ReactDOM.render(
,
document.getElementById（“react”）
);
事件冒出气泡
target
是事件起源的元素，因此您可以向按钮的所有子级添加id（不实用），或者在回调中分配id

const Example = () => {

  return (
    <button
      id="01"
      style={{ backgroundColor: "orange", padding: "40px" }}
      onClick={e => console.log("01")}
    >
      <span
        style={{ backgroundColor: "red", padding: "20px" }}
        className="content-type"
      >
        Button One
      </span>
    </button>
  );
};

const示例=（）=>{
返回(
console.log（“01”）}
>
按钮一
);
};

在这个简单的示例中，它似乎没有多大意义，但是id的一个典型用法是当您将数据数组映射到JSX时，在JSX中添加/删除/更新数组中的数据需要特定id

差不多

data.map(el => (
  <button
    key={id}
    id={el.id}
    style={{ backgroundColor: "orange", padding: "40px" }}
    onClick={e => callback(el.id)}
  >
    <span
      style={{ backgroundColor: "red", padding: "20px" }}
      className="content-type"
    >
      Button {el.id}
    </span>
  </button>

data.map（el=>(
回调（el.id）}
>
按钮{el.id}
事件冒泡。
target
是事件起源的元素，因此您可以向按钮的所有子项添加id（不实用），或在回调中分配id

const Example = () => {

  return (
    <button
      id="01"
      style={{ backgroundColor: "orange", padding: "40px" }}
      onClick={e => console.log("01")}
    >
      <span
        style={{ backgroundColor: "red", padding: "20px" }}
        className="content-type"
      >
        Button One
      </span>
    </button>
  );
};

const示例=（）=>{
返回(
console.log（“01”）}
>
按钮一
);
};

在这个简单的示例中，它似乎没有多大意义，但是id的一个典型用法是当您将数据数组映射到JSX时，在JSX中添加/删除/更新数组中的数据需要特定id

差不多

data.map(el => (
  <button
    key={id}
    id={el.id}
    style={{ backgroundColor: "orange", padding: "40px" }}
    onClick={e => callback(el.id)}
  >
    <span
      style={{ backgroundColor: "red", padding: "20px" }}
      className="content-type"
    >
      Button {el.id}
    </span>
  </button>

data.map（el=>(
回调（el.id）}
>
按钮{el.id}
我知道这个问题已经解决了，但我想您可能想知道一个不需要css的解决方案是使用e.currentTarget.id而不是e.target.id

e、 currentTarget获取声明处理程序的对象（按钮），无论事件在何处启动

e、 目标获取事件开始的对象（单击橙色按钮，单击红色范围）

const示例=（）=>{
返回(
console.log（e.currentTarget.id）}
>
按钮一
);
};
ReactDOM.render(
,
document.getElementById（“react”）
);

Ref:
我知道这个问题已经解决了，但我想您可能想知道一个不需要css的解决方案是使用e.currentTarget.id而不是e.target.id

e、 currentTarget获取声明处理程序的对象（按钮），无论事件在何处启动

e、 目标获取事件开始的对象（单击橙色按钮，单击红色范围）

const示例=（）=>{
返回(
console.log（e.currentTarget.id）}
>
按钮一
);
};
ReactDOM.render(
,
document.getElementById（“react”）
);

参考：马吕斯，很高兴知道，这有助于：D@Marius，很高兴知道，这很有帮助