本文介绍如何利用 react 的 usestate hook 实现：当用户在 whiteselect 组件中选择选项时，其选中的 label 文本（如 "aso" 或 "normal"）自动显示在下方 whiteinput 文本框中。
本文介绍如何利用 react 的 usestate hook 实现：当用户在 whiteselect 组件中选择选项时，其选中的 label 文本（如 "aso" 或 "normal"）自动显示在下方 whiteinput 文本框中。
在 React 应用中，实现表单控件间的值联动是常见需求。本例中，需将 <whiteselect></whiteselect> 的选中项 label（而非 value）实时反映到 <whiteinput></whiteinput> 的显示内容中。关键在于：WhiteSelect 的 onChange 事件通常接收的是整个选项对象（如 {label: 'ASO', value: true}），而 WhiteInput 的 value 属性需要字符串类型，因此必须在状态更新逻辑中提取 label 字段。
以下是推荐的实现方式（基于函数组件与 Hooks）：
import { useState } from 'react';
function ServiceForm() {
const [noteValue, setNoteValue] = useState<string>(''); // 初始为空字符串，更符合表单语义
const handleSelectChange = (selectedOption: { label: string; value: any }) => {
// 安全提取 label，避免 undefined 导致渲染异常
if (selectedOption && typeof selectedOption.label === 'string') {
setNoteValue(selectedOption.label);
}
};
return (
<styledfieldsrow>
{/* First input — WhiteSelect */}
<whiteselect tabindex="{7}" requiredfield placeholder="Select one" name="aso" defaultvalue="{{" label: value: false label="Type of service" options="{[" true menuplacement="top" onchange="{handleSelectChange}"></whiteselect>
{/* Second input — WhiteInput */}
<whiteinput style="{{" width: ismobile : name="note" label="Comments" tabindex="{9}" placeholder="Enter notes" value="{noteValue}" state onchange="{(e)"> setNoteValue(e.target.value)} // ✅ 允许用户后续手动编辑（可选）
/>
</whiteinput></styledfieldsrow>
);
}
export default ServiceForm;</string>
⚠️ 注意事项：
-
WhiteSelect必须支持onChange回调并正确传递选中选项对象（确认其文档或源码行为）；若它只传value，则需配合options数组做 label 查找（不推荐，易出错）； -
WhiteInput必须作为受控组件使用（即始终绑定value和onChange），否则无法响应状态更新； - 若希望“仅同步、不可编辑”，可省略
WhiteInput的onChange，但需确保value始终为最新 label； - 若
WhiteSelect使用自定义 hook（如useController）或封装了 Formik/React Hook Form，请优先通过对应库的setValue或field.onChange更新，而非直接操作本地 state。
总结：核心模式是「状态驱动 + 事件映射」——用 useState 管理共享值，通过 onChange 提取并同步 label，再将其注入目标输入框。此方案简洁、可预测，且易于扩展（例如添加格式化、防抖或条件同步逻辑）。
