Javascript事件处理程序不工作

我试图根据用户选择的选择选项的值来创建和渲染组件。 我正在使用模板字符串，但事件处理程序有问题。 该函数不会触发

下面是我的代码

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=>handleBooleanAnswerChooseevent}

而不是

onclick=${handlebooleanswerchooseevent} 下面是我对带有事件处理程序的元素的结果

---

您应该首先使用JSX编写一个常规的React组件函数或基于类，并以React的方式在DOM中呈现它

然后，您需要传递对处理程序函数的引用，而不是立即调用它：

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

事件=>handleBooleanAnswerChooseevent而不是handleBooleanAnswerChooseevent

您必须使用事件处理程序在每个元素上修复此问题

您还需要使用onClick而不是onClick

---

使用初始语法，您将handleBooleanAnswerChoose函数求值的结果分配给javascript值，该值不是作为事件处理程序的函数，因此无法按预期工作。值是不可调用的。我之前使用的上述方法对我没有帮助。 我用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);

---

当我这样做时，在DOM中，显示的是原始代码，而不是HTML元素。我将用您的解决方案的结果更新我的问题。我刚刚注意到事件处理程序上有一个错误：要捕获单击事件，请使用onClick而不是onClick。在我的答案中添加了引用。@FlorianMotteau OP正在将HTML放入模板字符串中，而不是使用JSX–没有onClick更改会有帮助…是的，刚刚注意到…更新了我的答案，从那个小细节开始：。等等，为什么要将insertAdjacentHTML和模板字符串与React和JSX混合使用。。？这样做可能不会有什么好处……你建议我怎么做呢？只使用React组件，就像一个人所做的那样。你在这里做什么？在更宏大的计划中？什么是parentToAppendTo？这意味着您的应用程序中可能有多个或嵌套的React根，这可能会进一步导致问题。大多数但并非所有React应用程序将只有一个ReactDOM.render调用。