React中Select组件OnChange无法调用另一个组件的问题

核心问题 #

1. 组件未导入：DownloadCenter中使用DownloadCenter1但未执行导入操作，导致控制台报错组件不存在
2. React与jQuery混用冲突：用jQuery监听下拉框变更事件，脱离React状态驱动模式，且仅调用React.createElement未将组件挂载到DOM树中
3. 无效渲染内容：DownloadCenter1的render方法返回空值，即使触发渲染也无法显示任何内容
4. 重复且错误的DOM操作：两个组件的componentDidMount中重复初始化select2，且DownloadCenter1错误操作了父组件的下拉框ID

修复代码 #

1. 修改DownloadCenter组件

import DownloadCenter1 from './DownloadCenter1'; // 按实际文件路径导入组件
const e = React.createElement;

class DownloadCenter extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            productDownloadList : [],
            showDownloadCenter1: false // 新增状态控制子组件显示
        }
        this.handleSelectChange = this.handleSelectChange.bind(this); // 绑定事件上下文
    }

    componentDidMount() {
        // 建议使用React封装的select2组件，减少原生DOM操作冲突
        $("#select_productLine13").select2();
        axios({
            method: 'POST',
            url: 'http://localhost:8082/abc/support/pqr/getProductLines',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            data: {}
        })
        .then(response =>{
            this.setState({productDownloadList : response.data.productLineDTOList})
        })
        .catch(error => {
            console.error(error); // 修正错误打印方式
        });
    }

    handleSelectChange() {
        // 通过状态变更触发子组件渲染
        this.setState({showDownloadCenter1: true});
    }

    render() {
        const {productDownloadList, showDownloadCenter1} = this.state;
        const productDownloadList1 = productDownloadList.map((item, i) => {
            return e("option", {
                key: i,
                value: item.productLineId
            }, item.productLineName);
        });

        return e("div", {className: "fl"}, // React中用className替代原生class属性
            e("select", {
                id: "select_productLine13",
                name: "selDataVal",
                onChange: this.handleSelectChange
            }, productDownloadList1),
            // 根据状态条件渲染子组件
            showDownloadCenter1 && e(DownloadCenter1)
        );
     }
}

2. 修改DownloadCenter1组件

"use strict";
const e = React.createElement;

class DownloadCenter1 extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            productDownloadList : []
        }
    }

    componentDidMount() {
        // 若需初始化自身的select2，使用当前组件内的下拉框ID，避免与父组件冲突
        // $("#your-inner-select-id").select2();
        axios({
            method: 'POST',
            url: 'http://localhost:8082/abc/support/pqr/downloadCenter/productNames',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            data: {}
        })
        .then(response =>{
            this.setState({productDownloadList : response.data.productLineDTOList})
        })
        .catch(error => {
            console.error(error); // 修正错误打印方式
        });
    }

    render() {
        console.log("inside");
        // 返回有效JSX内容，示例展示获取到的产品列表
        return e("div", null,
            e("h3", null, "产品名称列表"),
            e("ul", null,
                this.state.productDownloadList.map((item, i) => 
                    e("li", {key: i}, item.productLineName)
                )
            )
        );
    }
}

export default DownloadCenter1 ;
// 移除自动挂载代码，由父组件控制渲染时机
// const domContainer = document.querySelector('#select_productLine112');
// const root = ReactDOM.createRoot(domContainer);
// root.render(e(DownloadCenter1));

关键注意事项 #

• 状态驱动渲染：始终通过React状态变更控制组件的显示/隐藏，避免直接用jQuery操作DOM和事件监听
• 组件依赖管理：确保使用的子组件已正确导入，路径需匹配实际文件位置
• React语法规范：使用className替代原生class属性，render方法必须返回有效的JSX或null
• 第三方插件兼容：使用jQuery类插件时，优先选择React封装版本，或在组件生命周期内正确初始化，避免DOM操作冲突

内容的提问来源于stack exchange，提问作者BHARAT KAPSE