在字符串中间输入一个字母会使光标回到末尾 - Material UI

Question

我实现了一个 ChipInput 组件，该组件在聚焦时将表现为一个字符串，而 onBlur 将转换为一个 Chip 组件，其中的芯片由逗号引入。除了一个问题外，一切都很好。当我输入多个单词时，我想在中间添加一个新字母，光标将我带到最后，但我希望光标停留在同一位置。

有人可以帮帮我吗？谢谢

这是我的 Stackblitz link

Answer 1

出现此问题是因为每次 index.tsx 中 name 的值发生变化时都会重新呈现 ChipInput 组件。

此问题的一个解决方案是更改 ChipInput.tsx 中 state 的更新方式。

首先，从 ChipInput.tsx 中删除以下 useEffect 代码：

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

将state的初始值改为：

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

修改setState语句deleteChip函数为：

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

到 ChipInput.tsx 中 Autocomplete 组件的 onInputChange 道具的末尾。 onInputChange 道具看起来像：

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

在字符串中间输入一个字母会使光标回到末尾 - Material UI

Typing a letter in the middle of a string takes the cursor back to the end - Material UI

textfield

typescript

reactjs

material-ui