时间戳

首页 > 解决方案 > 按下回车后如何存储和操作文本输入？

reactjs - 按下回车后如何存储和操作文本输入？

问题描述

我试图在按 Enter 时存储文本输入，这对我不起作用。当我按下回车键时，甚至没有警报响起。

这是我当前的简化代码：

const ToDo = () => {
  const saveValueFunction = (e: any) => {
    console.debug(e.keyCode)
    if (e.keyCode === 13) {
      AsyncStorage.setItem('any_key_here', e)
      alert('Data Saved')
    }
  }

  const [value, onChangeText] = React.useState('')
  return (
    <TextInput
      placeholder="Add a Task"
      placeholderTextColor="aqua"
      color="aqua"
      backgroundColor="#262626"
      style={styles.textInput}
      onChange={(e) => onChangeText(e.target.value)}
      value={value}
      onKeyDown={(e) => saveValueFunction(e)}
    />
  )
}

标签： reactjsreact-native

解决方案

您可以使用onKeyPresswhich 在按下任何键时调用。使用 Native 事件调用它，该事件具有key保存诸如或用户键入的字符之类的Enter值的属性。Backspace因此，您可以将其与Enter检测用户按下的 Enter 进行比较。

const [value, setValue] = React.useState('');
const handleKeyPress = e => {
  if (e.key === 'Enter') {
    AsyncStorage.setItem('any_key_here', value);
    setValue('');
    showAlert();
    alert(`Task saved: ${value}`);
  }
};

<TextInput
  value={value}
  onChangeText={text => setValue(text)}
  onKeyPress={e => handleKeyPress(e)}
  placeholder="Add a Task"
  placeholderTextColor="aqua"
  color="aqua"
  backgroundColor="pink"
  style={styles.textInput}
/>

代码游乐场：世博会

推荐阅读