开发者问题收集

2 TypeError:无法使用事件处理程序在 reactjs 中读取未定义的属性(读取“值”)

2022-02-10
9322

我的代码有什么问题?

我得到了两个 - TypeError:无法读取未定义的属性(读取“值”)

预期行为 = 单击一个按钮,该按钮使用类名 red 并调用函数 addValue 如果我再次单击此按钮,它应该调用函数 removeValue 并且其颜色应该变为白色。

相反,我得到了这个类型错误,每个按钮都以红色突出显示。

const [color, setColor] = useState(false)



function addValue(e) {
> 38 |     if (e.target.value !== "") {

  function removeValue(e, value) {
> 63 |   if (e.target.value !== "") {

这些是函数

function addValue(e) {
    if (e.target.value !== "") {
      
      if (!favs.includes(e.target.value)) {
        favs.push(e.target.value);
        localStorage.setItem("name", JSON.stringify(favs));
        console.log(favs);
        document.getElementById("favsarray").innerHTML =  favs
      }
    }
  }



function removeValue(e, value) {
    if (e.target.value !== "") {
      //delete from array
      favs.pop(e.target.value);
      console.log(favs);
      //change the div text
      document.getElementById("favsarray").innerHTML = favs;
      //get the values from localstorage- parse
      const stored = JSON.parse(localStorage.getItem("name"));
      //delete the value
      delete stored[(value, e.target.value)];
      //store the new array as a string
      localStorage.setItem("name", JSON.stringify(favs));
      console.log(stored);
    }
  }

我正在用这个和事件处理程序调用这个函数

function addOrRemove(e) {
  const elem = e.currentTarget;
  setColor(!color)
if (color){
  addValue(elem)
} else {
  removeValue(elem)
}
}


<button
                id="btn"
                onClick={addOrRemove}
                className={color? "white": "red"}
                value={"Name:  " + d.name + "  Description:   " + d.description + "  Stars: " + d.stargazers_count + "  URL:   " + d.html_url}
            
1个回答

您只需将两个有问题的地方的 e.target.value 替换为 e.value

这是因为 e 是函数的参数,您调用该函数的方式如下:

addValue(elem);

after

const elem = e.currentTarget;

其中 e 是事件处理程序函数的参数。因此 elem 是事件处理程序当前正在触发的 DOM 元素,因此这就是函数内部的 e 。并且 DOM 元素没有 target 属性,但是 - 如果它们是按钮或输入 - 它们确实具有 value 属性。

如果您将参数称为 elem (您在调用时使用)或 element (完整)而不是 e ,那么会更清楚,按照惯例,它用于事件对象,并且可能是让您感到困惑的地方。

Robin Zigmond
2022-02-10