如何使用React-Select根据第一级选择框值动态控制第二级选择框的默认值

核心原因 #

• defaultValue 仅在组件首次挂载时生效，后续props/状态变更不会触发默认值更新
• 直接绑定value但没有配套的onChange事件处理，会导致组件变成完全受控状态，用户选择操作无法更新对应状态，所以没法选其他选项

解决方案 #

把两个Select都改成受控组件，新增状态分别管理两级的选中值，第一级切换时同步更新第二级的选项和选中值即可，完整修改代码如下：

import { useState } from 'react';
import Select from 'react-select';

let params = {
    "grade" : 1,
    "time" : 1,
}

function Calculator () {
    const options1 = [
        { value: 1, label:'example01'},
        { value: 2, label:'example02'},
    ]
    const options2_1 = [
        { value: 1, label:'example01-1'},
        { value: 2, label:'example01-2'}
    ]
    const options2_2 = [
        { value: 1, label:'example02-1'},
        { value: 2, label:'example02-2'}
    ]

    // 新增状态管理两级选中值
    const [gradeSelected, setGradeSelected] = useState(options1[0])
    const [timeOption, setTimeOption] = useState(options2_1)
    const [timeSelected, setTimeSelected] = useState(options2_1[0])

    function changeOption(data, info) {
        let selectName = info.name
        let selectValue = data.value
        setGradeSelected(data)
        if (selectValue === 1) {
            setTimeOption(options2_1)
            // 第一级切换时同步重置第二级选中值
            setTimeSelected(options2_1[0])
        }
        else if (selectValue === 2) {
            setTimeOption(options2_2)
            setTimeSelected(options2_2[0])
        }
    }

    // 第二级Select的选择事件处理
    function handleTimeChange(data) {
        setTimeSelected(data)
    }

    return (
        <div>
            <div className="select_wrap">
                <Select 
                    options={options1} 
                    className='calc' 
                    value={gradeSelected} 
                    classNamePrefix='calc' 
                    isSearchable={ false } 
                    name={"grade"}  
                    onChange={changeOption}
                />
                <Select 
                    options={timeOption} 
                    className='calc' 
                    value={timeSelected} 
                    classNamePrefix='calc' 
                    isSearchable={ false } 
                    name={"time"}
                    onChange={handleTimeChange}
                />
            </div>
        </div>
    )
}

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