React组件表单提交时如何获取嵌套option标签的value值

方式一：React受控组件实现（推荐） #

这是React生态下的最佳实践，后续加校验、联动逻辑都更灵活：

• 第一步：在组件内声明选中值的状态

const [selectedMsgType, setSelectedMsgType] = useState('')

• 第二步：修正Form.Select属性配置，你之前把name属性写在option标签上是错误的，需要绑定到select节点上，同时关联状态和变更事件：

<Form.Select 
  name="selectMessage"
  value={selectedMsgType}
  onChange={(e) => setSelectedMsgType(e.target.value)}
  style={{ display: 'inline-block' }} 
  size="lg" 
  aria-label="Default select example"
>
  {/* 显式设置默认空值，避免提交时取到不符合预期的内容 */}
  <option value="">Click to choose message</option>
  {mainNotifications.map((n, i) =>
    <option key={i} value={n.type}>{n.message}({n.type})</option>
  )}
</Form.Select>

• 第三步：在handleSubmit中直接读取状态即可

const handleSubmit = (e) => {
  e.preventDefault()
  // 此处拿到的就是选中option对应的value值（即n.type）
  console.log('选中的消息类型：', selectedMsgType)
  // 后续业务逻辑
}

方式二：原生表单直接读取 #

不需要额外维护状态，适合简单场景：

• 第一步：仅需要给Form.Select加上name="selectMessage"属性，无需绑定value和onChange，占位option同样建议显式加value=""
• 第二步：提交时直接从表单事件对象中读取字段值

const handleSubmit = (e) => {
  e.preventDefault()
  const selectedValue = e.target.selectMessage.value
  console.log('选中的消息类型：', selectedValue)
}

额外注意事项 #

• 如果需要做必填校验，可直接给Form.Select加required属性，表单会自动触发浏览器原生校验，禁止空值提交
• 若默认选中指定项，只需要给useState的初始值赋值为对应option的value即可

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