在字符串中间键入字母将光标带回末端 - 材料UI

发布于 2025-01-22 03:43:36 字数 460 浏览 2 评论 0原文

我实现了一个Chipinput组件，当焦点将其表现为字符串时，将通过逗号引入的芯片转换为芯片组件。除了一个问题外，所有功能都很好。当我输入多个单词时，我想在两者之间添加一个新字母时，光标将我带到了最后，但我希望光标保持在同一位置。

有人可以帮我吗？谢谢。

这是我的Stackblitz link link

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

失眠症患者 2025-01-29 03:43:36

此问题之所以发生，是因为chipInput每次name in index.tsx.tsx中的值都会更改名称。

解决此问题的一种解决方案是更改状态>内部chipinput.tsx已更新。

首先，从chipinput.tsx中删除以下使用代码：

  useEffect(() => {
    setState({
      inputValue: values,
      value: compact(map(split(values, separator), (i) => trim(i))),
    });
  }, [values]);

将state state的初始值更改为：

  const [state, setState] = useSetState<IChipInputState>({
    value: compact(map(split(values, separator), (i) => trim(i))),
    inputValue: values,
    isFocused: false,
  });

修改set> setState语句deletechip函数to：

    setState({
      value: newChipValues,
      inputValue: join(newChipValues, `${separator} `),
      isFocused: false,
    });

deletechip函数将看起来像：

  const deleteChip = (chipValue: string): void => {
    const newChipValues = without(state.value, chipValue);
    setState({
      value: newChipValues,
      inputValue: join(newChipValues, `${separator} `),
      isFocused: false,
    });
    onHandleChange(join(newChipValues, `${separator} `), name);
  };

最后添加

setState(prev => ({...prev, inputValue: onChangeValue }));

到的OnInputChange prop的末尾chipinput.tsx中的autocomplete组件。 oninputChange prop将看起来像：

      onInputChange={(event, newInputValue) => {
        let onChangeValue = newInputValue;
        if (acceptOnlyNumbers) {
          onChangeValue = replace(newInputValue, /[^\d, ]/, '');
        }
        if (acceptOnlyNumbersPercentage) {
          onChangeValue = replace(newInputValue, /[^\d,% ]/, '');
        }
        onHandleChange(onChangeValue, name);
        setState(prev => ({...prev, inputValue: onChangeValue }));
      }}

This issue occurs because the ChipInput component is rerendered every time there is a change in the value of name in index.tsx.

One solution to this problem is to change the way state inside ChipInput.tsx is updated.

Firstly, remove the following useEffect code from ChipInput.tsx:

  useEffect(() => {
    setState({
      inputValue: values,
      value: compact(map(split(values, separator), (i) => trim(i))),
    });
  }, [values]);

Change the initial value of state to:

  const [state, setState] = useSetState<IChipInputState>({
    value: compact(map(split(values, separator), (i) => trim(i))),
    inputValue: values,
    isFocused: false,
  });

Modify the setState statement the deleteChip function to:

    setState({
      value: newChipValues,
      inputValue: join(newChipValues, `${separator} `),
      isFocused: false,
    });

The deleteChip function would then look like:

  const deleteChip = (chipValue: string): void => {
    const newChipValues = without(state.value, chipValue);
    setState({
      value: newChipValues,
      inputValue: join(newChipValues, `${separator} `),
      isFocused: false,
    });
    onHandleChange(join(newChipValues, `${separator} `), name);
  };

Finally add

setState(prev => ({...prev, inputValue: onChangeValue }));

to the end of the onInputChange prop of the Autocomplete component in ChipInput.tsx. The onInputChange prop would then look like:

      onInputChange={(event, newInputValue) => {
        let onChangeValue = newInputValue;
        if (acceptOnlyNumbers) {
          onChangeValue = replace(newInputValue, /[^\d, ]/, '');
        }
        if (acceptOnlyNumbersPercentage) {
          onChangeValue = replace(newInputValue, /[^\d,% ]/, '');
        }
        onHandleChange(onChangeValue, name);
        setState(prev => ({...prev, inputValue: onChangeValue }));
      }}

回复收藏 0 原文

~没有更多了~