如何使 onchangetext 中的处理提交反应原生答案

【问题标题】：How to make handle submit in onchangetext react native如何使 onchangetext 中的处理提交反应原生
【发布时间】：2021-07-02 07:10:05
【问题描述】：

我有一个项目移动应用程序，但我有一个小问题。所以，我想让 FORM 没有按钮保存，数据在用户键入时保存。因此，我尝试在 lodash 中使用 debounce，但仍然存在最后一个字母键入的关键字未保存的问题。示例：我输入“beautiful”然后只保存“beautifu”。我的代码是这样的：

import { debounce } from "lodash"
const [text, setText] = useState("")


const handleSubmit = async () => {
............................
............................
}

const handler = debounce(async () => await handleSubmit(), 1000)

const onChangeText = async (value) => {
  setText(value)
  await handler()
}

<TextInput
  value={text}
  onChangeText={onChangeText}
  style={styles.input}
  underlineColor={"#ededed"}
  theme={{ colors: { primary: "#ededed" } }}
  selectionColor={"#0f9ed1"}
/>

那么，有人帮我解决这个问题吗？

【问题讨论】：

标签： react-native lodash textinput debounce

【解决方案1】：

您应该直接在您的 handleSubmit 上传递文本值：

import { debounce } from "lodash"
const [text, setText] = useState("")


const handleSubmit = async (value) => {
............................
............................
}

const handler = debounce(async (value) => await handleSubmit(value), 1000)

const onChangeText = async (value) => {
  setText(value)
  await handler(value)
}

<TextInput
  value={text}
  onChangeText={onChangeText}
  style={styles.input}
  underlineColor={"#ededed"}
  theme={{ colors: { primary: "#ededed" } }}
  selectionColor={"#0f9ed1"}
/>

您没有获得最新的字符，因为在您调用 handleSubmit 时状态尚未更新为最新的值。

使用 useEffect 可以更好地处理此用例：

import { debounce } from "lodash"
const [text, setText] = useState("")


useEffect(()=>{
    (async ()=>{
        await handler(value)
    })()
},[text])

const handleSubmit = async (value) => {
............................
............................
}

const handler = debounce(async (value) => await handleSubmit(value), 1000)

const onChangeText = (value) => {
  setText(value)
}

<TextInput
  value={text}
  onChangeText={onChangeText}
  style={styles.input}
  underlineColor={"#ededed"}
  theme={{ colors: { primary: "#ededed" } }}
  selectionColor={"#0f9ed1"}
/>

【讨论】：

【解决方案2】：

const [text, setText] = useState("")

<TextInput
  value={text}
  onChangeText={(text) => setText(text)}
  style={styles.input}
/>

【讨论】：