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