element-ui的el-select组件采用jsx方式渲染，通过鼠标点击页面选不中下拉选项

Question

题目描述

element-ui的el-select组件采用jsx方式渲染，通过鼠标点击页面选不中下拉选项，原生select可以

题目来源及自己的思路

需求是，点击按钮弹窗messagebox，messagebox中有一个下拉框。因为messagebox是纯js，所以就想到用jsx实现

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<template>

  <div class="hello">

    <el-button @click="submit">点击打开弹窗</el-button>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      netZoneIdMaps: [

        {domainId: '1', name: '名称1'},

        {domainId: '2', name: '名称2'},

        {domainId: '3', name: '名称3'}

      ],

      netZoneId: ''

    }

  },

  methods: {

    submit () {

      let jsxHtml = (

        <div>

          <el-select value={this.netZoneId} onChange={this.setSelect}>

            {this.netZoneIdMaps.map(item => {

              return (

                <el-option

                  key={item.domainId}

                  label={item.displayName}

                  value={item.domainId}>

                </el-option>

              )

            })}

          </el-select>

        </div>

      )

      this.$alert(jsxHtml, {

        type: 'question',

        dangerouslyUseHTMLString: true,

        showCancelButton: true,

        confirmButtonText: '确定',

        cancelButtonText: '取消'

      }).then(() => {})

    },

    setSelect (e) {

      console.log('触发change事件')

      this.netZoneId = e

      console.log(e)

    }

  }

}

</script>

你期待的结果是什么？实际看到的错误信息又是什么？

我预想的是切换可以正常切换下拉框选项。结果却是页面没有反应，change事件可以触发。没有找到原因。

注：将el-select和el-option改为原生的select和option是正常的。

Answer 1

dangerouslyUseHTMLString&nbsp;将message作为html片段处理。然而你只是写的jsx，即 只是想给message传递VNode而已。

Answer 2

onChange事件改为 onInput事件