React Hooks - Выберите значение параметра и имя в том же методе

Question

У меня следующая ситуация, когда я хочу получить разные значения для установки состояния (item.id и item.name) при выборе элемента в раскрывающемся списке. На данный момент я могу сделать только для 1 значение (item.id)

Как я могу сделать в том же методе, это возможно?

Это код

  const [selectedValue, setSelectedValue] = useState("");
  const [selectedName, setSelectedName] = useState("");

  const selectValue = evt => {
    const { value } = evt.target;
    setSelectedValue(value);
  };

  <select value={selectedValue} onChange={selectValue}>
     {teamsDetail && teamsDetail.length > 0
        ? teamsDetail.map(item => (
           <option key={`${item.team_id}`} value={item.team_id}>
             {item.name}
           </option>
              ))
            : null}
   </select>

{selectedValue}
{selectedName} ??

Вопрос в том, как теперь я могу добавить те же логи c также для значения имени te, чтобы отобразить, например, selectedName?

Я предоставляю здесь демонстрацию => https://codesandbox.io/s/select-demo-u1o1k

Answer 1

Вы можете получить имя из teamDetail на основе id

const selectValue = evt => {
    const { value } = evt.target;
    const item = teamsDetail.find(item => item.id == value);
    setSelectedValue(value);
    setSelectedName(item.name);
  };

или вы можете получить значение, используя nativeEvent, чтобы получить текст опции, например

 const selectValue = evt => {
    const { value } = evt.target;
    const index = evt.nativeEvent.target.selectedIndex;
    const text = evt.nativeEvent.target[index].text;
    setSelectedValue(value);
    setSelectedName(text);
  };