this.value 总是返回未定义 - React

Question

我正在努力通过 Onclick 事件向本地存储添加值。它应该从按钮中获取innerHTML，并将该值作为“Cemetery”值放入本地存储中。

我尝试了多种不同的方法来获取该值，但我一直没有定义。如果您能给我帮助和一些指点，那就太好了！

const CemeteryPage = () => {
 
  
function setCemetery(ListItem) {
  
    localStorage.setItem("Cemetery", ListItem.value)

 

}
  return (
    <>
    <div className='Header'>
        <h1>What <span>cemetery</span> is this stone going to?</h1>
       <div className='Line'></div>
    </div>
     <div class="CemeteryList">
        <div className="ListItem" onClick={function(){setCemetery(this)}}>
        St Anthony's Cemetery
        </div>
        <div className="ListItem" onClick={function(){setCemetery(this)}}>
       Hillside Cemetery
        </div>
      </div>
        
    </>
  )
}

我尝试使用 .getAttribute、.attributes[]，我尝试添加一个 value 属性并从那里提取它，但仍然未定义。

Answer 1

在提供的代码片段中，传递给 setCemetery 函数的 ListItem 预计具有 value 属性。然而，在 React 中，像 onClick 这样的事件处理程序默认不会直接传递 DOM 元素，而是传递事件对象本身。因此，onClick 函数中的 this 并不引用 DOM 元素本身。

要解决此问题，您可以修改 setCemetery 函数以直接接受墓地的值，而不是期望具有 value 属性的对象。这是修改后的代码：

const CemeteryPage = () => {
  function setCemetery(value) {
    localStorage.setItem("Cemetery", value);
  }

  return (
     <>
      <div className='Header'>
       <h1>What <span>cemetery</span> is this stone going to?</h1>
       <div className='Line'></div>
     </div>
     <div class="CemeteryList">
      <div className="ListItem" onClick={() => setCemetery("St Anthony's Cemetery")}>
        St Anthony's Cemetery
      </div>
      <div className="ListItem" onClick={() => setCemetery("Hillside Cemetery")}>
      Hillside Cemetery
      </div>
    </div>
   </>
);
}