如何将第一个WhiteSelect的选中值显示到第二个WhiteInput中？

要实现将WhiteSelect的选中值同步到WhiteInput中，核心是通过React状态管理关联两个组件，具体实现步骤如下：

1. 引入状态管理钩子：在函数组件中使用useState保存WhiteSelect的选中值
2. 给Select添加 onChange 事件：选中项变化时同步更新状态
3. 绑定状态到Input组件：将状态值设置为WhiteInput的value属性

以下是修改后的完整代码示例：

import { useState } from 'react';

// ... 其他组件相关代码

<StyledFieldsRow>
  {/* First input */}
  <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={(selectedOption) => setSelectedOption(selectedOption)}
  />

  {/* Second input */}
  <WhiteInput
    style={{
      width: isMobile ? '100%' : '',
    }}
    name="note"
    label="Comments"
    tabIndex={9}
    placeholder="Enter notes"
    // 将选中项的label显示在输入框，如需显示value可改为selectedOption.value
    value={selectedOption.label}
    // 如需允许用户编辑输入内容，添加onChange更新状态；仅展示则可移除并加readOnly
    onChange={(e) => setSelectedOption({...selectedOption, label: e.target.value})}
  />
</StyledFieldsRow>

关键说明： #

• 初始化状态const [selectedOption, setSelectedOption] = useState({ label: 'Normal', value: false });，确保默认值与WhiteSelect的defaultValue一致
• WhiteSelect的onChange回调会接收完整的选中选项对象（包含label和value），用它同步更新状态
• 若输入框仅用于展示无需编辑，可移除WhiteInput的onChange事件并添加readOnly属性

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