当原因是“create-option”时取消 MUI Autocomplete onChange

Question

如果该值存在错误，我希望能够不允许用户将输入值添加到自动完成的值数组，但我也想保留当前正在输入的输入值。 有没有办法取消活动？

<Autocomplete
    multiple
    options={[]}
    freeSolo
    onChange={(event, value, reason) => {
        if (reason === 'create-option' && error) {
        // prevent this event from going through
        }
    }}
    ...
/>

感谢帮助！

Answer 1

这本身并不是对上面提出的问题的解决方案，而是解决了我的问题。

const [inputValue, setInputValue] = useState('');

  return (
    <Autocomplete
      multiple
      options={[]}
      freeSolo
      renderTags={(values: string[], getTagProps) => {
        return values.map((option: string, index: number) => {
          if (!option) return;
          return (
            <Chip
              variant="outlined"
              label={option}
              {...getTagProps({ index })}
            />
          );
        });
      }}
      inputValue={inputValue}
      onChange={(event: any, values: any, reason: string) => {
        if (reason === 'create-option' && form.getState().errors.verses) {
          setInputValue(values[values.length - 1]);
          values[values.length - 1] = null;
        } else {
          setInputValue('');
        }
      }}
/>

如果在 Autocomplete 上设置inputValue ，然后将持久值设置为 null，则可以保留输入值而不保存不需要的值，这样用户就不必重新开始输入。 如果该值有效，则将输入值设置为空字符串。