本文介绍使用 react 的 usestate hook 实现联动控制：当用户在 whiteselect 下拉组件中选择选项时，将对应值（如 label 或 value）实时同步显示在下方 whiteinput 文本框中。
本文介绍使用 react 的 usestate hook 实现联动控制：当用户在 whiteselect 下拉组件中选择选项时，将对应值（如 label 或 value）实时同步显示在下方 whiteinput 文本框中。
要实现“第一个下拉选择的值自动显示在第二个输入框中”，核心在于建立两个组件之间的受控状态绑定。由于 WhiteSelect 并非原生 <select></select>，其 onChange 回调通常接收的是选中的 option 对象（而非原始 event），因此需根据实际组件 API 调整事件处理逻辑。
以下是一个完整、健壮的实现方案：
✅ 正确用法（适配常见 Select 组件）
import { useState } from 'react';
function ServiceForm() {
const [noteValue, setNoteValue] = useState<string>('');
const handleSelectChange = (selectedOption: { label: string; value: any }) => {
// 根据业务需求决定填充 label 还是 value —— 多数场景推荐 label（更友好）
setNoteValue(selectedOption.label);
};
return (
<StyledFieldsRow>
{/* First input: controlled select */}
<WhiteSelect
tabIndex={7}
requiredField
placeholder="Select one"
name="aso"
defaultValue={{
label: 'Normal',
value: false,
}}
label="Type of service"
options={[
{ label: 'ASO', value: true },
{ label: 'Normal', value: false },
]}
menuPlacement="top"
onChange={handleSelectChange} // ✅ 关键：传入选中项对象
/>
{/* Second input: controlled text input */}
<WhiteInput
style={{ width: isMobile ? '100%' : '' }}
name="note"
label="Comments"
tabIndex={9}
placeholder="Enter notes"
value={noteValue} // ✅ 受控绑定
onChange={(e) => setNoteValue(e.target.value)} // 允许用户后续手动编辑
/>
</StyledFieldsRow>
);
}
export default ServiceForm;⚠️ 注意事项
-
不要依赖
event.target.value：WhiteSelect的onChange通常不传递标准 DOM Event，而是直接传入选中的 option 对象（如{label: 'ASO', value: true}）。强行读取event.target.value会导致undefined。 -
保持输入框可编辑性：示例中
WhiteInput同时监听value和onChange，确保用户既能由选择触发填充，也能手动修改内容——这是良好的 UX 实践。 -
初始化一致性：若默认选中
'Normal'，则noteValue初始值应设为'Normal'（或通过useEffect同步），避免首次渲染时输入框为空。 -
类型安全建议：使用 TypeScript 时，为
handleSelectChange显式标注参数类型，防止运行时错误。
? 扩展提示
如需填充 value 字段（例如 true/false），只需将 setNoteValue(selectedOption.label) 改为 setNoteValue(String(selectedOption.value))；若需 JSON 序列化复杂值，务必先 JSON.stringify() 并注意转义。
通过合理利用 React 的状态管理与组件间数据流，即可轻松实现跨组件的动态联动，无需引入额外库或副作用逻辑。
