React中Bootstrap Select提交表单后无法重置选中项求助

核心问题分析 #

你的下拉框无法重置的原因有两个：

1. memberID初始状态类型错误：初始值是数组[{'memberID':'','last_name':''}]，但下拉框选中值是字符串类型，类型不匹配导致状态更新无法同步到视图。
2. 下拉框未绑定value属性：两个Form.Select都没有设置value关联对应状态，属于非受控组件，状态变化无法触发视图更新。

具体修复步骤 #

• 修正memberID的初始状态为字符串空值
• 给两个下拉框添加value属性，绑定对应的状态变量
• （可选）统一amount的初始值类型为字符串，避免类型不一致问题

修复后的完整代码 #

import React from 'react'
import {Form,Button} from 'react-bootstrap'
import { useState, useContext } from 'react'
import { MemberContext } from '../contexts/MemberContext'
import { CategoryContext } from '../contexts/CategoryContext'
import { ContributionContext } from '../contexts/ContributionContext'

const Contribution = () => {
    const {sortedMembers} = useContext(MemberContext);
    const {sortedCategories} = useContext(CategoryContext);
    const {addContribution} = useContext(ContributionContext);
    const date1 = new Date();
    const defaultValue = date1.toLocaleDateString('en-CA');
    
    // 修正memberID初始状态为字符串空值
    const [memberID, setMemberID] = useState('');
    const [date, setDate] = useState(defaultValue);
    const [notes, setNotes] = useState('');
    // 可选：将amount初始值改为空字符串，保持类型一致
    const [amount, setAmount] = useState('');
    const [categoryID, setCategoryID] = useState('');

    const onSubmit = e => {
        e.preventDefault();
    
        addContribution(memberID, date, notes, amount, categoryID);
           
        setMemberID('');
        setNotes('');
        setAmount('');
        setCategoryID('');
        // 可选：重置日期为默认值
        // setDate(defaultValue);
    };

    return (
    <>
    <div className='container mt-5 ' >
<Form onSubmit={onSubmit} >
<h1>Add Contribution</h1>
<br/>
<br/>
{/* 给下拉框添加value属性，绑定memberID状态 */}
<Form.Select 
    aria-label="Default select example" 
    className='form-control' 
    value={memberID}
    onChange={(e) => setMemberID(e.target.value)}
>
  <option value="">Choose MemberID</option>
  {
    sortedMembers.map(item =>(
        <option value={item.memberID } key={item.id} >{item.memberID} : {item.first_name} {item.last_name} </option>
    ) )
  }
</Form.Select>

<Form.Group className="form-control" >
    <Form.Control type="date" placeholder="Date *"  value={date} name="date" onChange={(e) => setDate(e.target.value)}/>
</Form.Group>

<Form.Group className="form-control" >
    <Form.Control type="text" placeholder="Notes *"  name='notes' value={notes} onChange={(e) => setNotes(e.target.value)} />
</Form.Group>

<Form.Group className="form-control" >
    <Form.Control type="number" placeholder='Amount *' name='amount' value={amount} onChange={(e) => setAmount(e.target.value)} min={0}/>
</Form.Group>

{/* 给分类下拉框添加value属性，绑定categoryID状态 */}
<Form.Select 
    aria-label="Default select example" 
    className='form-control'
    value={categoryID}
    onChange={(e) => setCategoryID(e.target.value)}
>
  <option value="">Choose Category</option>
  {
    sortedCategories.map(cat =>(
        <option value={cat.id} key={cat.id} >{cat.category}  </option>
    ) )
  }
</Form.Select>

<Button variant="primary" type="submit">
    Submit
</Button>
</Form>
</div>
</>
)
}

export default Contribution

额外说明 #

• 给默认选项添加value=""，确保状态为空时默认选项会被选中
• 受控组件必须同时设置value和onChange，这样状态和视图才能双向同步
• 所有表单字段的状态类型尽量保持一致，避免因类型不匹配导致的视图更新异常

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