javascript - 事件传播时如何获取按钮值

Question

我正在制作一个 react 按钮组件，该组件看起来像这样

const Button = props => {
  return (
    <button
      style={props.style}
      onClick={props.onClick}
      className={`btn ${props.color} ${props.loading &&
        "loading"} ${props.block && "block"} ${props.className}`}
      disabled={props.disabled}
      type={props.type}
      value={props.value}
    >
      <span className={"content"}>
        {props.icon && <span className={"icon-left"}>{props.icon}</span>}
        {props.children}
      </span>
      {props.loading ? <Spinner /> : null}
    </button>
  );
};

当我尝试向按钮组件添加 value 属性和事件监听器时，就会出现问题。 如果我这样做并尝试从 onClick 处理程序获取 event.target.value 值，则仅当我单击按钮的其他部分时它才起作用，单击跨度文本会返回 未定义

这似乎合乎逻辑，因为跨度没有值，我可以用来解决这个问题的最佳方法是什么？

Answer 1

您应该使用event.currentTarget而不是event.target

The currentTarget event property returns the element whose event listeners triggered the event.

更多阅读here .