Question

我有一个异步Autocomplete组件，到目前为止工作正常。

希望简化的代码足够容易理解：

export function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>) {
  const [open, setOpen] = useState(false);

  const [options, setOptions] = useState<T[]>();
  const onSearch = (search: string) => {
    fetchOptions(search).then(setOptions);
  };

  return (
    <Autocomplete<T>
      open={open}
      onOpen={() => {
        setOpen(true);
      }}
      onClose={() => {
        setOpen(false);
      }}
      onChange={(event, value) => {
        props.onChange(value as T);
      }}
      getOptionSelected={props.getOptionSelected}
      getOptionLabel={props.getOptionLabel}
      options={options}
      value={(props.value as NonNullable<T>) || undefined}
      renderInput={(params) => (
        <TextField
          {...params}
          onChange={(event) => onSearch(event.currentTarget.value)}
        />
      )}
    />
  );
}

上面的组件很容易工作：当用户单击输入时，Autocomplete组件将显示一个空的输入字段，用户可以在其中输入要搜索的值。输入更改后，将重新提取选项以显示匹配的结果。

现在，我想添加对短代码的支持：当用户键入 qq 时，搜索项应替换为 something ，就像用户键入<他们自己的东西。

但是，我发现无法以编程方式更新渲染的TextField的值。即使我直接在value上设置了TextField，它也不会显示我的价值，而只会显示用户输入的内容。

那么，有什么想法可以解决这个问题吗？

非常感谢您。

到目前为止，我一直尝试在onKeyUp中更新输入内容：

  // ...
  renderInput={(params) => (
    <TextInput
      {...params}
      label={props.label}
      onChange={(event) => onSearchChange(event.currentTarget.value)}
      InputProps={{
        ...params.InputProps,
        onKeyUp: (event) => {
          const value = event.currentTarget.value;
          if(value === 'qq') {
              event.currentTarget.value = 'something';
          }
        },
      }}
    />
  )}

使用上面的代码，我可以在短时间内看到something，但是很快就会被初始用户输入所取代。

Answer 1

Autocomplete对于在以下两种类型的场景之一中设置单行文本框的值很有用。

combobox-文本框的值必须从预定义的集合中选择。您正在使用它，因此不允许您添加自由文本（将其替换为模糊文本）

答案：以编程方式控制获取和设置值。您需要一个状态变量。

在此处查看combobox的代码示例free solo

您的带有我评论的代码：-

export function AsyncAutocomplete<T>(props: AsyncAutocompleteProps<T>) {

  ... //code removed for brevity

  //This is a state variable to get and set text value programmatically.
  const [value, setValue] = React.useState({name: (props.value as NonNullable<T>) || undefined});
  
 return (
    <Autocomplete<T>

      ... //code removed for brevity

      //set value
      value={value}
      //get value
      onChange={(event, newValue) => setValue(newValue)}

      renderInput={(params) => (
         <TextInput
           {...params}
           label={props.label}
           onChange={(event) => onSearchChange(event.currentTarget.value)}
           InputProps={{
           ...params.InputProps,
           onKeyUp: (event) => {
           //get value
           const value = event.currentTarget.value;
           //if qq then set 'something'
           if (value === "qq") {
              setValue({ name: "something" });
           }
           //otherwise set user free input text
           else {
              setValue({ name: value });
           }
          },
       }}
      />
      )}
    />
  );
}

@ material-ui自动完成：以编程方式设置输入值

1 个答案:

您的带有我评论的代码：-