React中如何根据数组特定字段值禁用select下拉框选项

直接在渲染下拉选项时根据商品库存值动态绑定disabled属性即可，同时修复下拉框取值的类型转换问题。

核心修改逻辑 #

• 遍历商品数组渲染<option>时，给标签添加disabled属性，禁用规则按需求设置为item.stock < 0 || item.stock === 1

  提示：你描述的规则存在逻辑冲突（库存为1属于大于0的范围），如果实际需求是库存≤0（售罄）时禁用，把判断条件改为item.stock <= 0即可，完全匹配「库存大于0可正常选中」的规则，可根据实际业务调整。

• 原生select选中事件返回的value默认是字符串类型，更新state时转为数字，避免和初始值的数字类型不匹配导致选中态异常。
• 可以给禁用选项追加文字提示，提升用户体验。

修改后完整代码 #

import React, {useState} from 'react'
import {Form, Button} from 'antd' 

const Products = [    
    { key: 1, value: "A", stock: 0 },
    { key: 2, value: "B", stock: 1  },
    { key: 3, value: "C", stock: 2 },
    { key: 4, value: "D", stock: 0  },
    { key: 5, value: "E", stock: 0 },
    { key: 6, value: "F", stock: 3  },
    { key: 7, value: "G", stock: 4 },    
]

function ProductPage() {
    // States
    const [product, setProduct] = useState(1) // initial value : 1

    // Handlers
    const productChangeHandler = (event) => {
        // 把字符串值转成数字，和state初始类型保持一致
        setProduct(Number(event.currentTarget.value))
    }


    return (
        <div style={{ maxWidth: '700px', margin: '2rem auto' }}>
            <div style={{textAlign: 'center', marginBottom: '2rem'}}>
                <h2>Product Soldout State</h2>
            </div>
            
            <Form>
                <br />
                <br />
                <select onChange={productChangeHandler} value={product} >
                    {Products.map(item => (
                        <option 
                            key={item.key} 
                            value={item.key}
                            // 按需求设置禁用规则，这里默认按你写的stock<0或等于1禁用
                            disabled={item.stock < 0 || item.stock === 1}
                            // 如果是售罄（库存<=0）禁用，替换为下面这行即可
                            // disabled={item.stock <= 0}
                        >
                            {item.value}
                            {/* 给禁用项加提示 */}
                            {item.stock < 0 || item.stock === 1 ? ' (不可选)' : ''}
                        </option>
                    ))}                    
                </select>
                <Button>Upload</Button>
            </Form>
        </div>
    )
}

export default ProductPage

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