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 将message作为html片段处理。

• 然而你只是写的jsx，即 只是想给message传递VNode而已。

Answer 2

onChange事件改为 onInput事件