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);

这对我来说非常有效