如何在 React Native 的 TextInput 中禁用退格键？答案

【问题标题】：How to disable backspace key in TextInput in React Native?如何在 React Native 的 TextInput 中禁用退格键？
【发布时间】：2020-08-10 05:54:30
【问题描述】：

我正在使用 TextInput，我希望 TextInput 中的第一个符号保持不变。因此，如果文本的长度是一个符号，我可以忽略退格，并且可以忽略 onChangeText 事件。以下代码不起作用，无论如何都会发生 onChangeText 事件。请问有什么解决办法吗？

<Input 
 onChangeText = { (text) => onTextChange(text) }
 onKeyPress = { (e) => { 
   if(e.nativeEvent.key === 'Backspace') {
      e.preventDefault(); 
      e.stopPropagation();
   }
 } } 
/>

【问题讨论】：

@andreprok，你找到解决办法了吗！

标签： react-native onkeypress backspace react-native-textinput

【解决方案1】：

你可以试试这个：

<TextInput
   onKeyPress={({ nativeEvent }) => {
      if(nativeEvent.key === 'Backspace'){
         //It was a backspace
      }
   }}
/>

我想你只是忘记了nativeEvent之后的.key

【讨论】：

谢谢您，修复了帖子并添加了关键属性。我什至尝试不使用“if”，但无论如何都会发生 onChangeText 事件。
目前我找到了两种解决方法。首先，处理 onTextChange 我正在添加已删除的符号，但它看起来并不完美，因为它会导致符号闪烁。其次，编写我自己的由 Text 和 TextInput 组件组成的组件。如果有办法取消 onTextChange 事件并更改值，我认为这将是一个简单而漂亮的解决方案。

【解决方案2】：

我猜你可以尝试为文本输入设置一个锁定并将其传递给文本输入的可编辑属性。当触发 onKeyPress 时，当键为退格时锁定文本输入，否则释放锁定。一个例子是：

const [inputLock, setInputLock] = useState(false);
.......
<TextInput
onKeyPress={({ nativeEvent }) => {
              if (nativeEvent.key === "Backspace") {
                setInputLock(true);
              } else {
                setInputLock(false);
              }
            }}
editable={!inputLock}
..../>

【讨论】：