javascript - 如何防止退格键出现多余的 "r"字母

Question

目前，我正在开发一个输入框，该输入框用于输入 Reddit 链接。

我的输入框经过编码，当用户键入字符时，前面会有一个默认的 r/，后面是用户输入的内容。

但是，现在我面临的问题是，每当用户在输入框留下r/时退格时，后面就会出现一个额外的r r/ 每当用户按下退格键时。例如r/r

这是我的代码片段:

case getType(ViewerAction.changeInputSubredditAddNewSource): {
            const s = action.payload.inputSubredditAddNewSource.split('/').slice(1).join('');

            if (action.payload.inputSubredditAddNewSource.indexOf('r/') === 0) {            
                return state.set('inputSubredditAddNewSource', `r/${s}`);
            }         
                const st = action.payload.inputSubredditAddNewSource;
                return state.set('inputSubredditAddNewSource', `r/${st}`);
        }

Answer 1

这应该在你的组件中处理，而不是 redux。您的输入应该检测何时单击退格按钮以及该字段是否为空(只是“r/”) - 不要更新字段的值。

当新输入的 value.length 小于 2(第一个字符:“r”，第二个字符:“/”)时，您可以简单地在输入的 onChange 处理程序中添加 if 语句 - 不要更新值 - 否则，更新。