React按钮，它传递一个prop并激活一个函数

Question

我正在学习react，我很难让我的按钮从函数更改其状态，以及将事件传递回父组件。基本上，当我点击一个按钮，我希望它之间的过滤水平和保持选择通过改变它的状态，但我不能想出一种方法来做两者与onClick。我试过把一个箭头函数放在onClick上，把两个函数放在一个函数中，但仍然不能让它工作。如果有更好的方法，请告诉我。

父元素内部:

const levelFilter = (event) => {
switch (event.target.value) {
case "BEGINNER":
return setFilteredLevel(beginner);
case "INTERMEDIATE":
return setFilteredLevel(intermediate);
case "ADVANCED":
return setFilteredLevel(advanced);
default:
return null;
}
};
return (
<>
<ProjectLibraryFilterButtons levelFilter={levelFilter} />
</>
);
}

子组件内部:

export default function ProjectLibraryFilterButtons({
levelFilter
}) {
const [filterLevel, setFilterLevel] = useState("");
const changeLevel = (e) => {
setFilterLevel(levelFilter.value);
};
const styledButton = {
backgroundColor: "rgb(0, 106, 245)",
color: "white",
};
return (
<>
<div className="pl-btn-container">
<div className="pl-left-btn">
{filterLevel === "BEGINNER" ? (
<button
style={styledButton}
className="pl-filter-btn first-pl"
>
BEGINNER
</button>
) : (
<button
value="BEGINNER"
onClick={levelFilter}
className="pl-filter-btn first-pl"
>
BEGINNER
</button>
)}

Answer 1

找到了解决我遇到的特定问题的方法。我最终使用onClickCapture来触发我的函数，并传递一个prop

Answer 2

onClick={(e)=>levelFilter(e)}