React中this.value始终返回undefined的问题求助

问题分析 #

你遇到的核心问题有两个：

1. React严格模式下，事件处理函数里的this不会指向触发事件的DOM元素，所以你传this给setCemetery时，参数实际是undefined，导致后续取属性全是undefined。
2. <div>本身没有原生value属性，就算手动添加自定义value，也不能用.value获取，得用getAttribute('value')，但这种方式不如直接传递文本内容可靠。

解决方案 #

方案一：通过事件对象获取DOM元素的文本 #

利用React合成事件的e.target获取触发点击的元素，再提取其文本内容：

const CemeteryPage = () => { 
  function setCemetery(element) { 
    // 用trim去除文本前后的空格
    const cemeteryName = element.innerHTML.trim();
    localStorage.setItem("Cemetery", cemeteryName);
  }

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

方案二：直接传递文本参数（更简洁可靠） #

既然每个按钮的文本是固定的，直接把文本作为参数传给setCemetery，不用操作DOM：

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

  return (
    <>
      <div className='Header'>
        <h1>What <span>cemetery</span> is this stone going to?</h1>
        <div className='Line'></div>
      </div>
      <div className="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>
    </>
  )
}

内容的提问来源于stack exchange，提问作者itzagoodvibe-code