Javascript 如何防止嵌套映射元素触发onClick事件两次
我创建了一个测验应用程序,它有问题和选项。首先,我映射了问题,在映射中,我映射了属于该问题的选项。每个选项都有自己的onClick事件处理程序来设置答案,该事件处理程序将答案发送到服务器。但问题是事件处理程序发送请求两次。原因一定是元素是用嵌套映射创建的,但我还没有找到任何解决方案。 以下是代码的一部分:Javascript 如何防止嵌套映射元素触发onClick事件两次,javascript,reactjs,ecmascript-6,redux,Javascript,Reactjs,Ecmascript 6,Redux,我创建了一个测验应用程序,它有问题和选项。首先,我映射了问题,在映射中,我映射了属于该问题的选项。每个选项都有自己的onClick事件处理程序来设置答案,该事件处理程序将答案发送到服务器。但问题是事件处理程序发送请求两次。原因一定是元素是用嵌套映射创建的,但我还没有找到任何解决方案。 以下是代码的一部分: let questions = null if (this.props.questions) { questions = this.props.questions.map((questio
let questions = null
if (this.props.questions) {
questions = this.props.questions.map((question, index) => {
return (
<div className={classes.Question} key={question.id}>
<p>{`${index + 1}) ` + question.value}</p>
{question.options.map((option, optionIndex) => {
return (
<label onClick={question.clicked ? null : () => this.props.onSetQuestionAnswer(...params)} key={optionIndex}>{option.value}
<input type="radio" name="radio" />
</label>
)
})}
</div>
)
})
}
您可以通过调用
event.preventDefault()
你没有关闭onClick={}?@RicardoCosta,我在重构发布代码时错过了它。问题是不同,我看不出有什么不对,它会发出两个POST请求吗?是的。我以为这是因为嵌套贴图,但我找不到解决方案。这不是一个选项请求和另一个帖子吗?你能给我看一下你的手柄吗?或者StopperPropagation我以前试过,但我很确定它不起作用。现在它开始工作了。非常感谢。
export const setOptionForQuestion = (...params) => {
return async dispatch => {
try {
const { data } = await axios.post(`endpoint`, {
..body
})
if (data.success) {
dispatch({
type: actionTypes.SET_ANSWER_OPTION,
...dataToReduxStore
})
}
} catch (error) {
dispatch({
type: actionTypes.SET_ANSWER_OPTION_ERROR
})
}
}
}
export const setOptionForQuestion = (...params,e) => {
e.stopPropagation()
e.preventDefault()
// rest of the code
}