如何利用React useState实现下拉选择框切换显示隐藏表单区域？

你的代码核心问题是没有根据option状态控制表单隐藏区域的显示/隐藏，同时还有几处细节需要修正。下面是修改后的完整代码，附带关键改动说明：

import React, { useState } from 'react';

function S() {
    const options = [
        { label: "no", value: "no" },
        { label: "yes", value: "yes" }
    ];

    // 设置初始默认值为"no"，确保初始状态下拉框默认选中no，隐藏区域不显示
    const [option, setOption] = useState('no');

    const handleOptionChange = (e) => {
        setOption(e.target.value);
    };

    return (
        <div className="App">
            <div className='container text-center'>
                <h3>Creator device</h3>
                <form>
                    <div className="row mb-3">
                        <label className="col-sm-2 col-form-label" id='finish'>
                            <h5>other device?</h5>
                        </label>
                        {/* 修正class为className，React中DOM元素类名用className */}
                        <div className="col-sm-10">
                            {/* 给select添加value绑定，使其成为受控组件，确保状态与选中值同步 */}
                            <select className="form-select" onChange={handleOptionChange} value={option}>
                                {options.map((optionItem) => (
                                    {/* 给option添加key属性，符合React列表渲染规范 */}
                                    <option key={optionItem.value} value={optionItem.value}>
                                        {optionItem.label}
                                    </option>
                                ))}
                            </select>
                        </div>
                    </div>

                    {/* 条件渲染：只有选中"yes"时才显示该表单区域 */}
                    {option === 'yes' && (
                        <div className="row mb-3">
                            <label className="col-sm-2 col-form-label" id='show'>
                                <h5> show other device</h5>
                            </label>
                            <div className="col-sm-10">
                                {/* 修正input的type，"group"不是合法的input类型，改为text */}
                                <input type="text" className="form-control" id="inputMB_sn" />
                            </div>
                        </div>
                    )}
                </form>
            </div>
        </div>
    );
}

export default S;

关键改动说明： #

1. 初始状态设置：给useState设置初始值'no'，确保页面加载时下拉框默认选中“no”，隐藏区域默认不显示。
2. 受控组件绑定：给select添加value={option}，让下拉框的选中状态与option状态完全同步，这是React表单的标准做法。
3. 条件渲染：使用{option === 'yes' && (...)}语法，只有当选中“yes”时才渲染对应的表单区域。
4. 细节修正：
   • 把所有class改为className（React中DOM元素的类名属性是className，而非HTML的class）。
   • 给列表渲染的option添加key属性，避免React警告。
   • 修正input的type为text（group不是合法的input类型）。

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