Home >> React Textarea无法实时修改内容
React Textarea无法实时修改内容
2023-06-05 14:42 AtmosphereMao
useState hook 不触发 React 的状态更新机制
问题
const [datum, setDatum] = useState<File | WebSite | any>()
const setInputValue = (value: string) => {
datum.content = value
setDatum(datum)
}
...
<AutoHeightTextarea
placeholder={t('datasetCreation.stepOne.webParser.input.url') as string}
value={datum?.content}
onChange={e => setInputValue(e.target.value)}
minHeight={58}
maxHeight={600}
className={`${cn(s.textArea)} overflow !py-2 resize-none block w-full !px-3 bg-gray-50 border border-gray-200 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm text-gray-700 tracking-[0.2px]`}
/>
根据代码,useState hook 的 datum 变量是一个对象,而在 setInputValue 函数中,直接修改了该对象的属性并将其传递给了父组件进行更新。这样做不会触发 React 的状态更新机制,因为 React 并不知道当前对象已经被修改。
解决方法
const setInputValue = (value: string) => {
setDatum((prevState: any) => ({...prevState, content:value}))
}
在这个新的 setInputValue
实现中,我们首先使用 setDatum
函数来更新 datum
状态变量。我们使用了函数形式的参数,以确保我们能够获取到最新的 datum
值。
然后,我们创建了一个新的对象,基于之前的 datum
对象,但是将内容 content
更新为传入的参数 value。最后,我们通过调用 setDatum
将更新的 datum
对象传递给父组件进行更新。
这样做应该可以让 datum
对象更新并正确地显示在组件中。
评论
暂无评论
* 登录后即可评论