React中如何实现<select>下拉选项随另一个<select>输入动态变更？

问题修复方案 #

你当前代码无法实现联动效果的两个核心问题：

1. 分类下拉框的渲染逻辑被包裹在未执行的匿名箭头函数中，React不会自动执行该函数输出内容，自然无法渲染对应选项
2. 交易类型的大小写不匹配：<option>里写的是首字母大写的Income/Expense，但switch判断用的是全小写的'income'/'expense'，条件永远无法命中

可直接使用的修改后代码 #

import React, { useState } from 'react'
import { useDispatch } from 'react-redux'

const AddToFinancials = ({setUpdate}) => {

    const dispatch = useDispatch()

    const [type, setType] = useState('')
    const [date, setDate] = useState('')
    const [amount, setAmount] = useState('')
    const [category, setCategory] = useState('')
    const [details, setDetails] = useState('')

    const handleAddExpense = (e) => {
        e.preventDefault()
        setUpdate()
        // dispatch()
    }

    // 抽离分类配置，后续新增类型和分类直接改这个对象即可，无需修改渲染逻辑
    const categoryConfig = {
        'Income': [
            { label: '营收', value: 'Revenue' },
            { label: '政府补贴', value: 'Government credit' }
        ],
        'Expense': [
            { label: '广告', value: 'Advertising' },
            { label: '物资', value: 'Supplies' },
            { label: '租金', value: 'Rent' },
            { label: '网络费用', value: 'Internet fee' }
        ],
        'RRSP Contribution': [],
        'Donation': []
    }

    return (
        <div>
            <div>
                <form className="ui form" onSubmit={handleAddExpense}>
                    <div className="ui fields">
                        <div className="ui field">
                            <select value={type} onChange={(e)=>setType(e.target.value)} className="ui fluid search dropdown" placeholder="Select type">
                                <option value="" disabled="disabled">选择交易类型</option>
                                <option value="Income">收入</option>
                                <option value="Expense">支出</option>
                                <option value="RRSP Contribution">RRSP缴款</option>
                                <option value="Donation">捐赠</option>
                            </select>
                        </div>
                        <div className="ui field">
                            <input value={date} onChange={(e)=>setDate(e.target.value)} type="date" className="ui input" />
                        </div>
                        <div className="ui field">
                            <input value={amount} onChange={(e)=>setAmount(e.target.value)} className="ui input" type="text" placeholder="金额"/>
                        </div>
                        
                        <div className="ui field">
                            <select 
                                value={category} 
                                onChange={(e) => setCategory(e.target.value)}
                                className="ui fluid search dropdown" 
                                placeholder="选择分类"
                            >
                                <option value="" disabled="disabled">选择分类</option>
                                {/* 直接从配置里取对应类型的分类渲染 */}
                                {categoryConfig[type]?.map((item) => (
                                    <option key={item.value} value={item.value}>{item.label}</option>
                                ))}
                                {/* 未选择类型时显示默认选项 */}
                                {!type && <option value="">请先选择交易类型</option>}
                            </select>
                        </div>            

                        <div className="ui field">
                            <input 
                                value={details}
                                onChange={(e) => setDetails(e.target.value)}
                                className="ui input" 
                                type="text" 
                                placeholder="明细"
                            />
                        </div>
                        <button type="submit" className="ui button">添加</button>
                    </div>                 
                </form>
            </div>
        </div>
    )
}

export default AddToFinancials

优化说明 #

• 把分类配置抽成独立对象，后续新增交易类型、新增分类只需要修改categoryConfig即可，不用修改渲染逻辑，代码更易维护
• 补全了category和details两个状态的双向绑定，提交表单时可以正常拿到用户输入的这两个字段值
• 删掉了冗余的switch判断，用数组的map方法渲染选项，代码更简洁

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