1 回答

TA貢獻1895條經驗 獲得超3個贊
問題是onClick處理程序的當前類型簽名基本上聲明參數event本身是一個函數。要糾正這個問題,您只想使用事件本身的類型:
<ListGroup id="riskQuestion-1">
<ListGroup.Item
action
onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>
handleInput(setRiskAnswer1, 5, event)
}
>
I was great!
</ListGroup.Item>
<ListGroup.Item
action
onClick={(event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>
handleInput(setRiskAnswer2, 3, event)
}
>
I did good but can be better
</ListGroup.Item>
</ListGroup>
事實上,由于您不想訪問僅在元素上找到的屬性<a>,您可以讓類型默認為最廣泛的類型:Element,這樣您就可以省略泛型。它在這里的原因HTMLAnchorElement是ListGroup.Item帶有一個action呈現鏈接 - 使用瀏覽器的開發人員工具的 DOM 檢查器查看生成的 HTML。你會看到<a>那里。雖然它可以是任何東西,實際上你可以通過asprop指定它。
<ListGroup id="riskQuestion-1">
<ListGroup.Item
action
onClick={(event: React.MouseEvent) =>
handleInput(setRiskAnswer1, 5, event)
}
>
I was great!
</ListGroup.Item>
<ListGroup.Item
action
onClick={(event: React.MouseEvent) =>
handleInput(setRiskAnswer2, 3, event)
}
>
I did good but can be better
</ListGroup.Item>
</ListGroup>
要解決你的第二個問題,function handleInput({answerHandler, value, event}:InputParams)是一個接受一個參數的函數,該參數是具有這些屬性的對象。但是,您handleInput使用三個單獨的參數進行調用,因此它應該是:
function handleInput(
answerHandler: React.Dispatch<React.SetStateAction<number | null>>,
value: number,
event: React.MouseEvent
)
由于您不在此處使用功能更新,因此您可以擺脫以下問題:
function handleInput(
answerHandler: (answer: number | null) => void,
value: number,
event: React.MouseEvent
)
解決這些問題后,更多問題出現在handleInput. 第一個是 thatevent.target可能不是一個元素,因此它的類型沒有.parentNode. 在這種情況下,最好使用.currentTarget. 另請參閱javascript 中的 currentTarget 屬性和 target 屬性之間的確切區別是什么。
修改后的函數為:
function handleInput(
answerHandler: (answer: number | null) => void,
value: number,
event: React.MouseEvent
) {
event.preventDefault();
const parentEl = event.currentTarget.parentNode;
const parentId = parentEl.getAttribute("id");
if (parentId) {
const el = document.getElementById(parentId);
if (el) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].classList.contains("selected")) {
el.children[i].classList.remove("selected");
}
}
}
}
event.currentTarget.classList.add("selected");
answerHandler(value);
}
但是,唉,又出現了一個錯誤。這次是因為parentNode是類型Node。實際上有很多節點類型,“元素”只是其中之一!但顯然,您實際上對父元素感興趣,因此通過更改parentNode為parentElement,函數編譯:
function handleInput(
answerHandler: (answer: number | null) => void,
value: number,
event: React.MouseEvent
) {
event.preventDefault();
const parentEl = event.currentTarget.parentElement;
const parentId = parentEl.getAttribute("id");
if (parentId) {
const el = document.getElementById(parentId);
if (el) {
for (let i = 0; i < el.children.length; i++) {
if (el.children[i].classList.contains("selected")) {
el.children[i].classList.remove("selected");
}
}
}
}
event.currentTarget.classList.add("selected");
answerHandler(value);
}
作為結束語,我只是一般性地說,這種直接的 DOM 操作在 React 世界中非常粗略,并且在大多數情況下可以而且應該用 React 來實現。
添加回答
舉報