react-select onChange 事件不使用道具呈现

Question

我正在使用 select-react 库 --> https://react-select.com/home

我已设法将选项映射到 itemList 中我需要的单个项目。下拉菜单确实注册了所选选项，但我的最终目标是让我的条形图呈现所选选项的正确数据。

/**
 * Produces a filter list for item sales cards
 * @param {*} props
 * @returns the filter list of item names along with their ids
 */

export const ItemSelection = (props) => {
  const { onChangeValue, itemList } = props;

  if (itemList.length === 0) return <></>;

  return (
    <UncontrolledDropdown>
     <Select
        options={itemList.map((item) => {
          return {
            label: item.name,
            value: item,
            key: item.itemID,
          };
        })}
        onChange={(item)=>onChangeValue(item)}
        placeholder="ITEM"
      />
    </UncontrolledDropdown>
  );
};

这里使用了itemSelection：

  const [itemID = '1', setItemID] = useState('1');
  const [itemName = '', setItemName] = useState('');
  const [itemListID = [], setItemListID] = useState([]);

  <ItemSelection
      onChangeValue={(item) => {
         setItemID(item.itemID);
         setItemName(item.name);
       }}
        itemList={itemListID}
    />

onChangeValue 是将所选选项注册到条形图的选项。无论如何要映射 onChangeValue 吗？

Answer 1

这取决于您实际期望从使用 ItemSelection 的父元素得到什么​​参数。也就是说，看起来 Select 也接受了一个函数，该函数将字符串类型的操作和选项值作为第二个参数。然后，选定的值将出现在第二个参数中。

如果您关心的只是价值，那么您需要以下代码行中的内容。在那一点上，您将获得传递给onChangeValue 的选定字符串值，我想这就是您想要的，而无需从祖先组件中查看函数定义。

更新：

选择代码可以将整个选项对象作为第二个参数。

export const ItemSelection = (props) => {
  const { onChangeValue, itemList } = props;

  if (itemList.length === 0) return null;

  return (
    <UncontrolledDropdown>
      <Select
        options={itemList.map((item) => ({
          label: item.name,
          value: item.name, // note a change from your code here; it would have been an object otherwise
          key: item.itemID,
        }))}
        onChange={(item)=>onChangeValue(item)}
        placeholder="ITEM"
      />
    </UncontrolledDropdown>
  );
};

在父组件中

  // note the changes here where I deleted the assignments
  const [itemID, setItemID] = useState('1');
  const [itemName, setItemName] = useState('');
  const [itemListID, setItemListID] = useState([]);

  <ItemSelection
    onChangeValue={(option) => {
      setItemID(option.key);
      setItemName(option.value);
    }}
    itemList={itemListID}
  />