react-select onChange 事件不使用 props 渲染

Question

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

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

/**
 * 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 是将选项 selected 注册到条形图的那个。无论如何映射onChangeValue？

Answer 1

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

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

更新：

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

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}
  />

react-select onChange 事件不使用 props 渲染

react-select onChange event does not render with props

javascript

reactjs

react-select