Javascript 事件處理程序不工作反應

Question

我正在嘗試根據用戶選擇的 select 選項的值來創建和渲染組件。 我正在使用模板字符串，但事件處理程序有問題。 Function 不觸發

下面是我的代碼

const handleBooleanAnswerChoose = (event) =>{
 console.log(event.target)
}
 switch (question.answerType) {
    case "booleanChoices":
        const element = `<form id='booleanAnswerType' class='answerType'>
                         <label for='firstTrue' class='selectAnswerStyle'>
                         <input type='radio' onclick=${handleBooleanAnswerChoose(event)} id='firstTrue' name='booleanAnswer' value='True' />
                         </label>
                         <label for='firstFalse' class='selectAnswerStyle'>
                         <input type='radio' id='firstFalse' onclick=${handleBooleanAnswerChoose(event)} name='booleanAnswer' value='false' />
                          </label>
                    </form>`
                    parentToAppendTo.insertAdjacentHTML('beforeend', element)
                    break;
                default:
                    return <div>Nunca</div>

在建議將引用傳遞給事件處理程序之后

onclick=${(event) =>handleBooleanAnswerChoose(event))}

代替

onclick =${handleBooleanAnswerChoose(event)}我對帶有事件處理程序的元素的結果如下

Answer 1

您應該首先編寫一個常規的 React 組件（函數式或基於類的），使用 JSX 並以“React 方式”在 DOM 中呈現它。

然后您需要將引用傳遞給處理程序 function，而不是立即調用它：

<input type='radio' onClick=${(event) => handleBooleanAnswerChoose(event)} id='firstTrue' name='booleanAnswer' value='True' />

(event) => handleBooleanAnswerChoose(event)而不是handleBooleanAnswerChoose(event)

您必須使用事件處理程序在每個元素上修復此問題。

您還需要使用 onClick 而不是 onclick ( https://reactjs.org/docs/handling-events.html#gatsby-focus-wrapper )

使用您的初始語法，您將 handleBooleanAnswerChoose function 評估的結果（因此是 javascript 值，這不是一個函數）作為事件處理程序，因此它不能按預期工作（一個值不可調用）。

Answer 2

出色地。 我之前使用的上述方法對我沒有幫助。 我想出了如何使用 ReactDOM 以不同的方式做到這一點；

import ReactDOM from 'react-dom'
const parentToAppendTo = event.target.parentElement;
const element = <form id='booleanAnswerType' class='answerType'>
    <label for='firstTrue' class='selectAnswerStyle'>
        <input type='radio' onclick={(event)=>handleBooleanAnswerChoose(event)} id='firstTrue' name='booleanAnswer' value='True' />
    </label>
    <label for='firstFalse' class='selectAnswerStyle'>
        <input type='radio' id='firstFalse' onclick={(event)=>handleBooleanAnswerChoose(event)} name='booleanAnswer' value='false' />
    </label>
</form>

ReactDOM.render(element,parentToAppendTo);

這對我來說非常有效