时间戳

首页 > 解决方案 > @material-ui 自动完成：以编程方式设置输入值

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

问题描述

到目前为止，我有一个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短时间内看到 ，但它很快就会被初始用户输入所取代。

标签： reactjsmaterial-ui

解决方案

自动完成对于在以下两种场景之一中设置单行文本框的值很有用：组合框和自由独奏。

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

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

在这里查看来自官方文档的代码和框代码示例

你的代码和我的评论： -

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

推荐阅读