如何在Replay组件中获取Menu组件内Select菜单的选中值？

要实现点击按钮时获取两个Menu组件的选中值，核心思路是将状态提升到父组件Replay，把Menu改成受控组件，由父组件统一管理选中状态。具体实现步骤如下：

1. 修改Menu组件为受控组件 #

让Menu接收父组件传递的value和onChange属性，将Select菜单改为受控模式：

import React, {useContext} from 'react';
import { GlobalContext } from "./Store";

function Menu({ value, onChange }) {
    const [dataSet] = useContext(GlobalContext);

    const createOptions = dataSet.map((data) => {
        return <option value={data}>{data.name}</option>
    })

    return (
        <div className="data-list-container">
            <select 
                className="data-select"
                value={value}
                onChange={(e) => onChange(e.target.value)}
            >
                {createOptions} 
            </select>
        </div>
    );
}

export default Menu;

2. 在Replay组件中管理状态并获取选中值 #

在Replay中用useState保存两个Menu的选中值，给每个Menu传递对应的状态和回调，最后在按钮点击事件中读取这些值：

import React, { useState } from 'react';
import Menu from './Menu';

function Replay() {
    // 用数组保存两个Menu的选中值，索引对应两个组件
    const [selectedValues, setSelectedValues] = useState([null, null]);

    // 更新对应索引的选中值
    const handleSelectChange = (value, index) => {
        const newValues = [...selectedValues];
        newValues[index] = value;
        setSelectedValues(newValues);
    };

    // 按钮点击时获取并处理选中值
    const handleGetValues = () => {
        console.log("两个选中值：", selectedValues);
        // 这里可以添加后续的业务逻辑，比如提交、处理数据等
    };

    return (
        <div className='top-container'>
            <button onClick={handleGetValues}>Get Both Selected Values</button>
            <div className='live-replay-container'>
                <Menu 
                    value={selectedValues[0]} 
                    onChange={(val) => handleSelectChange(val, 0)} 
                />
                <Menu 
                    value={selectedValues[1]} 
                    onChange={(val) => handleSelectChange(val, 1)} 
                />
            </div>
        </div>
    )
}

export default Replay;

补充说明 #

• 这种状态提升的方式符合React单向数据流原则，后续扩展多个Menu组件时，只需扩展selectedValues数组和对应索引即可。
• 如果后续需要跨多层组件共享状态，可考虑使用Context或Redux，但当前场景下状态提升是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者program.exe