我试图在用户单击li
标签时记录它的值。但是当我单击那个li
时,它不知何故引发了错误。
TypeError: Cannot read property 'target' of undefined
我认为我在传递事件处理程序作为道具时遇到问题。
这是父组件
const Category = props => {
const dispatch = useDispatch();
let [value, setValue] = useState("choose");
let clickHandler = e => {
console.log(e.target.value);
dispatch({
type: ADD_CATEGORY,
payload: value
});
};
return (
<div className="part">
<h3 className="cat">category</h3>
<Options
items={["one", "two", "three"]}
name="category"
clickHandler={clickHandler}
value={value}
/>
</div>
);
};
这是孩子
const Options = props => {
let [expanded, setExpanded] = useState(false);
let clickHandler = () => {
props.clickHandler();
setExpanded(false);
};
return (
<div className="options-container">
<button
className="option-head"
onClick={() => setExpanded(!expanded)}
value={props.value}
>
{props.value}
</button>
<ul className={expanded ? "options expanded" : "options not-expanded"}>
<li className="ul-title" onClick={() => setExpanded(false)}>
{props.name}
</li>
{props.items.map((item, index) => (
<li key={index} onClick={clickHandler} value={item}>
<p value={item}>{item}</p>
</li>
))}
</ul>
</div>
);
};
谢谢!
答案 0 :(得分:1)
请如下更改您的代码
const Category = props => {
const dispatch = useDispatch();
let [value, setValue] = useState("choose");
let clickHandler = item => {
console.log(item);
dispatch({
type: ADD_CATEGORY,
payload: value
});
};
return (
<div className="part">
<h3 className="cat">category</h3>
<Options
items={["one", "two", "three"]}
name="category"
clickHandler={clickHandler}
value={value}
/>
</div>
);
};
const Options = props => {
let [expanded, setExpanded] = useState(false);
let clickHandler = (item) => {
props.clickHandler(item);
setExpanded(false);
};
return (
<div className="options-container">
<button
className="option-head"
onClick={() => setExpanded(!expanded)}
value={props.value}
>
{props.value}
</button>
<ul className={expanded ? "options expanded" : "options not-expanded"}>
<li className="ul-title" onClick={() => setExpanded(false)}>
{props.name}
</li>
{props.items.map((item, index) => (
<li key={index} onClick={() => clickHandler(item)} value={item}>
<p value={item}>{item}</p>
</li>
))}
</ul>
</div>
);
};
由于您没有在下面的代码中传递事件,因此由于未定义e
,因此未传递给类别组件。