React 函数式组件使用props传参作为state的注意项
现实场景需求
UE4像素流推送前端插件存在一个bug, 就是无法在视频流上进行汉字的输入, 因为该插件本质是一个标签, 当然不能在其中使用输入法来键入中文, 但是在现实数字孪生开发环境中我们肯定需要进行汉字的输入来进行查询和修改, 那么我们如何来实现这个功能呢?
目前我想到了三种解决方案, 第一种是在UE4程序内集成输入法, 第二种是吧UWG放到前端页面来做, 第三种则是在进行中文输入插入光标时传递信息给UE4像素流前端, 前端因此弹出一个输入框, 输入完成后传送回UE4, 更新输入框.
目前来说第一种和第二种对我这种没有UE4基础和UI切图的人来说是不切实际的, 但是第三种还是可以实现的, 但是在我用函数式组件解决的过程中, 发现了一个BUG, 即React函数式组件使用props传参作为state时子组件useState只能获取到第一次的传递的值, 以后的值也不会更新state.
遇到的问题
通俗的说, 我想实现如下的效果, 我父组件想要传递一个是否显示输入对话框的boolean状态值, 初始值为false
, 当父组件收到要开始输入消息时, 将改值更新为true
, 子组件收到后弹出输入对话框, 然后输入文字内容, 发送给UE4.
我们现在用一个父组件button点击事件来模拟一下收到信息后发送给子组件的过程
父组件HandSendMsg核心代码:
import React, { useState } from 'react'
import InputModal from '../../components/InputModal';
export default function HandSendMsg() {
const [inputModalVisible, setInputModalVisible] = useState(false)
return (
)
}
子组件InputModal核心代码:
import React, { useState } from 'react'
import { Input, Modal } from 'antd'
const { TextArea } = Input
export default function InputModal(props) {
const [inputModalVisible, setInputModalVisible] = useState(props.inputModalVisible)
const handleOk = () => {
// 发送消息给ue4, 代码省略
setInputModalVisible(false);
};
const handleCancel = () => {
// 取消发送消息
setInputModalVisible(false);
};
return (
<>