### 解决 React 表单中下拉框没有默认值的问题 在 React 中，`<select>` 元素的默认值可以通过 `value` 或 `defaultValue` 属性来设置。如果发现下拉框没有默认值，可能是由于状态管理或数据绑定的问题。以下是一个完整的解决方案[^1]： ```javascript import React, { useState } from 'react'; function List({ items }) { const [selectedId, setSelectedId] = useState(null); // 设置默认值为 null 或指定的默认项 ID return ( <select value={selectedId} // 绑定选中的值 onChange={(e) => setSelectedId(e.target.value)} // 更新状态 > <option value="" disabled hidden>请选择</option> {/* 提供占位选项 */} {items.map((item) => ( <option key={item.id} value={item.id}> {item.name} </option> ))} </select> ); } export default List; ``` 上述代码中，`useState` 的初始值可以设置为默认选项的 `id`，从而确保 `<select>` 元素加载时显示正确的默认值[^1]。 如果需要从父组件传递默认值，可以通过 `props` 实现，并将其作为 `useState` 的初始值[^2]： ```javascript function App({ defaultItemId }) { const [selectedId, setSelectedId] = useState(defaultItemId); return ( <List items={[ { id: 1, name: 'Option 1' }, { id: 2, name: 'Option 2' }, ]} selectedId={selectedId} onSelectionChange={setSelectedId} /> ); } ``` 此外，若使用受控组件（controlled component），则需要确保 `value` 和 `onChange` 都正确绑定到状态上[^2]。 对于样式问题，可以结合 CSS 框架（如 Tailwind CSS）进一步优化用户体验[^3]： ```javascript <select className="border-gray-300 border rounded-md p-2 focus:outline-none focus:ring focus:border-blue-500" value={selectedId} onChange={(e) => setSelectedId(e.target.value)} > {/* 选项内容 */} </select> ``` #### 后端交互场景下的默认值设置 如果默认值需要从后端获取，则可以在组件加载时通过异步请求获取数据，并更新状态[^4]： ```javascript import React, { useEffect, useState } from 'react'; import { addHouseResource } from '@/services/haoke'; // 引用后端接口 function Form() { const [selectedId, setSelectedId] = useState(null); useEffect(() => { const fetchDefaultSelection = async () => { try { const response = await addHouseResource({}); // 假设接口返回默认值 setSelectedId(response.defaultSelectionId); } catch (error) { console.error('Failed to fetch default selection:', error); } }; fetchDefaultSelection(); }, []); return ( <select value={selectedId} onChange={(e) => setSelectedId(e.target.value)}> {/* 选项列表 */} </select> ); } export default Form; ``` 上述代码展示了如何在组件挂载时通过异步请求设置默认值。 ---