如何return反应中点击元素的属性？

Question

我想知道是否有一种简单的方法可以在 React.js:

中获取单击元素的属性

function App () {
    return (
        <button
          title={'foo'}
          onClick={myFunction(this)}
         >
            click me
         </button>
    )
}

function myFunction(e) {
  alert(e.getAttribute('title')); 
}

现在我得到：TypeError: can't access property "getAttribute", e is undefined。

我需要在一个函数中使用它，以便稍后将属性传递给另一个（工作中的）函数。

Answer 1

你必须这样调用

<button
    title={'foo'}
    onClick={(e) => myFunction(e.currentTarget.title)}
>
   click me
</button>

在函数中，你得这样弄

function myFunction(e) {
  alert(e); // e is the value that you have pass 
}

Answer 2

您可以通过 currentTarget 访问标题

试试这个：


function App () {
    return (
        <button
          title={'foo'}
          onClick={myFunction}
         >
            click me
         </button>
    )
}

function myFunction(e) {
  alert(e.currentTarget.title); 
}

Answer 3

onClick={myFunction(this)} 表示 onClick prop 的值将被设置为 myFunction 返回的值，即 myFunction(this) 立即为运行评估代码时（而不是单击按钮时）。您可能希望使用 onClick={() => myFunction(this)} 之类的东西，以便单击按钮时箭头函数将为运行（并且箭头函数将调用 myFunction）。

但是，this 是 undefined，从您收到的错误消息中可以看出（“e 未定义”），因此您会收到错误消息（undefined 没有属性称为“getAttribute”）。

您可以像这样将事件对象传递给 myFunction：

onClick={(e) => myFunction(e)}

然后可以用e.currentTarget访问button元素，然后得到title属性：

function myFunction(e) {
  alert(e.currentTarget.getAttribute('title')); 
}

如何return反应中点击元素的属性？

How to return an attribute of clicked element in react?

javascript

onclick

buttonclick

reactjs