React Hooks-用相同的方法选择Option的值和名称

Question

我有以下情况，当我在下拉列表中选择一个项目时，我想获得不同的值来设置State（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} ??

问题是我现在如何也可以为名称名称添加相同的逻辑以显示例如selectedName？

Answer 1

您可以基于teamDetail从id中获取名称>

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