React下拉选择组件输入自定义值时选项自动重置问题求助

问题根源：你把下拉选中状态和自定义输入内容存在了同一个全局变量里。当选中"other"时，全局变量companypercentage变为"other"，但输入自定义文本时，你通过handleChange2把这个变量改成了输入的内容——此时下拉框的value是输入的文本，而下拉选项里并没有这个值，浏览器会自动将下拉重置到第一个选项。

解决方案：拆分状态存储 #

将「下拉选中项」和「自定义输入内容」分开存储，确保选中"other"后，下拉框的绑定值始终保持为"other"，输入操作只修改自定义内容变量。

1. 修改全局状态（appContext.js）

新增字段存储自定义内容，同时移除重复的handleChange2：

const initialState = {
  companypercentage: "قيد الانتظار",
  companypercentageOptions: ["قيد الانتظار"],
  companypercentageCustom: "", // 新增：专门存自定义输入内容
  excesscashcustomer: "قيد الانتظار",
  excesscashcustomerOptions: ["قيد الانتظار"],
};

// 删除重复的handleChange2，保留一个即可
const handleChange = ({ name, value }) => {
  dispatch({ type: "HANDLE_CHANGE", payload: { name, value } });
};

return (
  <AppContext.Provider
    value={{
      ...state,
      handleChange, // 只暴露一个handleChange
      // ...其他方法
    }}
  >
    {children}
  </AppContext.Provider>
);

2. 重构FormRowSelect组件

调整输入逻辑，确保下拉选中状态与自定义内容解耦：

import { useEffect, useState } from "react";
import { useAppContext } from "../context/appContext";

const FormRowSelect = ({
  labelText,
  name,
  value, // 绑定下拉选中值（比如"other"）
  handleChange,
  list,
  optionsIsActivated,
}) => {
  const { handleChange: globalHandleChange, [`${name}Custom`]: customValue } = useAppContext();
  const newList = [...list, "other"];

  // 输入时仅更新自定义内容变量，不修改下拉选中状态
  const handleInputChange = (e) => {
    const inputVal = e.target.value;
    globalHandleChange({ name: `${name}Custom`, value: inputVal });
  };

  return (
    <div className="formRow">
      <label htmlFor={name} className="form-label">
        {labelText || name}
      </label>

      <select
        name={name}
        value={value}
        onChange={handleChange}
        className="form-select choosebtn"
        style={{ color: "black" }}
      >
        {newList.map((itemValue, index) => (
          <option key={index} value={itemValue}>
            {itemValue}
          </option>
        ))}
      </select>

      {/* 直接判断下拉是否选中"other"，逻辑更可靠 */}
      {optionsIsActivated && value === "other" && (
        <input
          type="text"
          value={customValue}
          name={`${name}Custom`}
          onChange={handleInputChange}
          className="form-input other-input"
          placeholder="输入自定义内容"
        />
      )}
    </div>
  );
};

export default FormRowSelect;

3. 组件使用与提交逻辑（AllCustomer.js）

保持原有下拉绑定逻辑，提交时根据选中状态决定使用哪个值：

// ...其他代码
const handleSubmit = (e) => {
  e.preventDefault();
  // 提交时判断：如果选中的是other，就用自定义内容，否则用选中值
  const finalValue = companypercentage === "other" ? companypercentageCustom : companypercentage;
  // 后续提交逻辑使用finalValue即可
};

return (
  <Wrapper>
    <form className="form">
      {/* ...其他代码 */}
      <FormRowSelect
        name="companypercentage"
        value={companypercentage} // 始终绑定下拉选中状态
        handleChange={handleJobInput}
        list={companypercentageOptions}
        optionsIsActivated={true}
        labelText="companyPercentage:"
      />
      {/* ...其他代码 */}
    </form>
  </Wrapper>
);

4. reducer.js无需修改

原有的HANDLE_CHANGE逻辑已经支持动态更新任意字段，直接复用即可。

修改后，选中"other"时下拉框会保持选中状态，输入自定义内容只会更新companypercentageCustom变量，不会干扰下拉选中状态。提交表单时只需根据companypercentage的值选择对应的内容即可。

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