Question

我创建了一个测验应用程序，它有问题和选项。首先，我映射了问题，并在该映射内部，映射了属于该问题的选项。每个选项都有自己的onClick事件处理程序，用于设置答案，并且该事件处理程序将答案发送到服务器。但是问题是事件处理程序两次发送请求。原因一定是使用嵌套映射创建的元素，但是我还没有找到任何解决方案。这是代码的一部分：

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

点击事件操作创建者

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

    }
  }

Answer 1

您可以尝试致电span { font-size: 40px; font-weight: bolder; padding-left: 10px; padding-right: 10px; padding-top: 0px; padding-bottom: 0px; border: 1px solid black; border-radius: 5px; background-color: #aaf; line-height: 28px; display: inline-block; }

event.preventDefault()

如何防止嵌套的映射的元素触发两次onClick事件

1 个答案: