如何从HTML Select组件中捕获CompanyID与alias双值？

解决方法 #

方法一：通过ID匹配获取名称（推荐，逻辑清晰）

1. 修改Select组件的option，将value设为companiaID，显示文本保留公司名称：

const Select = function ({ name, db, on_change }) {
  return (
    <>
      {Array.isArray(db) ? (
        <select name={name} onChange={on_change}>
          <option key="0" value="">-- Seleccionar --</option>
          {db.map((x) => (
            <option key={x.companiaID} value={x.companiaID}>
              {x.alias}
            </option>
          ))}
        </select>
      ) : null}
    </>
  );
};

2. 在主组件的回调函数中，根据选中的ID从数据源里匹配对应的公司名称：

function ManejadorDeCambios(e) {
  const selectedId = e.target.value;
  const selectedCompany = datos.find(item => item.companiaID === selectedId);
  
  setformDato((estadoAnterior) => ({
    ...estadoAnterior,
    [e.target.name]: {
      pk: selectedId,
      titulo: selectedCompany ? selectedCompany.alias : ""
    },
  }));
}

方法二：利用HTML data属性存储ID

1. 修改Select组件的option，添加data-companiaid属性存储ID，value保持为公司名称：

const Select = function ({ name, db, on_change }) {
  return (
    <>
      {Array.isArray(db) ? (
        <select name={name} onChange={on_change}>
          <option key="0" value="-- Seleccionar --">-- Seleccionar --</option>
          {db.map((x) => (
            <option 
              key={x.companiaID} 
              value={x.alias}
              data-companiaid={x.companiaID}
            >
              {x.alias}
            </option>
          ))}
        </select>
      ) : null}
    </>
  );
};

2. 在主组件的回调中直接读取data属性的值：

function ManejadorDeCambios(e) {
  const selectedId = e.target.selectedOptions[0].dataset.companiaid;
  
  setformDato((estadoAnterior) => ({
    ...estadoAnterior,
    [e.target.name]: {
      pk: selectedId || "",
      titulo: e.target.value,
    },
  }));
}

方法三：组件内部封装回调，传递完整对象

1. 在Select组件内处理change事件，把选中的完整公司对象传给父组件：

const Select = function ({ name, db, on_change }) {
  const handleChange = (e) => {
    const selectedId = e.target.value;
    const selectedCompany = db.find(item => item.companiaID === selectedId);
    on_change(selectedCompany);
  };

  return (
    <>
      {Array.isArray(db) ? (
        <select name={name} onChange={handleChange}>
          <option key="0" value="">-- Seleccionar --</option>
          {db.map((x) => (
            <option key={x.companiaID} value={x.companiaID}>
              {x.alias}
            </option>
          ))}
        </select>
      ) : null}
    </>
  );
};

2. 主组件的回调直接接收选中的公司对象：

function ManejadorDeCambios(selectedCompany) {
  if (!selectedCompany) return;
  
  setformDato((estadoAnterior) => ({
    ...estadoAnterior,
    Dato: {
      pk: selectedCompany.companiaID,
      titulo: selectedCompany.alias,
    },
  }));
}

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