如何在选择下拉选项时同步设置输入框的value值？

要实现选择课程后输入框的value与显示内容同步更新，需要修改下拉框的onChange逻辑，根据选中的课程ID匹配对应课程的完整信息，再同步更新表单状态：

1. 修改下拉框的 onChange 事件处理
   不再直接调用通用的onInputChange，而是先通过选中的ID找到对应的课程数据，再更新表单状态中的author等字段：

   <select
     name="title"
     validation="Please select title"
     invalid
     required
     onChange={(e) => {
       const selectedId = e.target.value;
       // 根据ID匹配选中的课程对象
       const selectedCourse = users.find(item => item.id === selectedId);
       if (selectedCourse) {
         // 更新表单状态，同步课程的author等信息
         setSelect(prevState => ({
           ...prevState,
           title: selectedCourse.title,
           author: selectedCourse.author
           // 若有其他需要同步的字段（如课程时长、分类等），可在此添加
         }));
       }
     }}
   >
     <option value="">Choose Course</option> {/* 给默认选项设置空value，避免无效ID匹配 */}
     {users &&
       users.map((item) => (
         <option value={item.id} key={item.id}>
           {item.title}
         </option>
       ))}
   </select>
   

2. 确保输入框的value绑定正确
   保持MDBInput的value绑定到状态中的select?.author，同时添加空值兜底避免初始显示异常：

   <MDBInput
     value={select?.author || ''}
     name="author"
     type="text"
     label="Author"
     onChange={(e) => {
       onInputChange(e);
     }}
     required
     validation="Please select title"
     invalid
   />
   

3. 关键注意点

   • 需保证users数组中的id与下拉框选项的value类型一致，若id是数字类型，需将selectedId转为数字：Number(selectedId)
   • 默认选项必须设置空value，防止用户未选择课程时触发无效数据匹配

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