javascript - 如何防止某些字符从 React 输入标签中删除？

Question

我想知道如何防止特定字符串被删除，即使我在输入中按退格键传递了值。

产品:[none_fix]changeValue

我想防止 [none_fix] 部分被删除，即使我按退格键也是如此。

Answer 1

通过将您的输入设置为Controlled Component ，您可以决定输入显示什么值。将您需要的任何逻辑放入输入的 onChange 处理程序中 - 因此在这种情况下，不要传播会导致 UNERASABLE_TEXT 被删除的更改:

const UNERASEABLE_TEXT = "[none_fix]";

export default function App() {
  const [controlledValue, setControlledValue] = useState(UNERASEABLE_TEXT);

  const onInputChanged = (e) => {
    const newValue = e.target.value;
    // Only allow changes that retain the magic string:
    if (newValue.startsWith(UNERASEABLE_TEXT)) {
      setControlledValue(newValue);
    }
  };

  return <input onChange={onInputChanged} value={controlledValue} />;
}