React Hooks - Select 同一方法中的选项值和名称

Question

我遇到以下情况，当我 select 下拉列表中的一个项目时，我想获得不同的值来设置状态（ 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？

我在这里提供演示=> https://codesandbox.io/s/select-demo-u1o1k

Answer 1

可以根据id

从teamDetail取名字

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);
  };

React Hooks - Select 同一方法中的选项值和名称

React Hooks - Select Option value and name in the same method

javascript

setstate

reactjs

react-hooks