react-select组件中的预选值

Question

我有一张包含内容列表的表格。单击铅笔图标可以更新内容。虽然要编辑的值来自正常输入，但它们不会到达反应选择组件。官方文档中没有这方面的信息。将状态分配给 inputValue 和 value 也不起作用。最后一件事，我使用react-hook-form并控制react-select输入，如果任何有react-select经验的人可以提供帮助，我将非常高兴。

const handleEdit = (item) => {      
  setValue("type", item.type);     
};

<Controller
  name="type"
  control={control}
  render={({ field }) => (
    <Select
     {...field}
     options={[
       { value: "Brand", label: "Brand" },
       { value: "Category", label: "Category" },
       { value: "Product", label: "Product" },
     ]}
     placeholder="Type"
     onChange={handleTypeChange}
    />
 />

Answer 1

我终于解决了这个问题。我创建了一个单独的编辑状态并将值保留在那里。要点是将值作为对象发送。我将它们发送为 {label: "Label", value: "Value"} ，问题得到解决。当然，当我这样发送时，Select的标签并没有更新。因此，当我按下下拉菜单时，我无法选择新值，因此我必须更新 onChange 函数。如果有编辑值，我会在 onChange 中显示该值。我给出了下面的代码，也许有人需要它。

const [editedType, setEditedType] = useState({});

const handleEdit = (item) => {
  setEditedType({ label: item.type, value: item.type });      
};

const handleTypeChange = (type) => {
  setType(type);
  if (editedType) {
    setEditedType({ label: type.value, value: type.value });
  }
};

<Controller
  name="type"
  control={control}
  render={({ field }) => (
    <Select
    {...field}
    options={[
      { value: "Brand", label: "Brand" },
      { value: "Category", label: "Category" },
      { value: "Product", label: "Product" },
    ]}
    placeholder="Type"
    onChange={handleTypeChange}
    value={editedType ? editedType : value}
  />