React.js Flowbite模态框内动态表单字段无法更新问题排查

• 使用React结合Flowbite Modal时，遇到模态框内表单输入字段无法正常更新状态的问题：
  • 编辑输入时，输入框会失去焦点并自动聚焦到模态框的关闭按钮
  • 表单为动态渲染，点击表格行的编辑按钮可打开模态框并填充对应条目的名称、描述等信息，但输入内容仅在控制台有异常输出（如输入字符后仅保留原内容加最后一个输入字符），输入框视觉上无变化

状态初始化 #

const [formChange, setFormChange] = useState(false);
const [formData, setFormData] = useState({
    productName: "",
    productDescription: "",
});
const { productName, productDescription } = formData;

动态渲染模态框的useEffect #

useEffect(() => {
    if (formChange === true) {
        let table = selection.toLowerCase();
        let content;
        switch(table) {
            case "products":
                content = (
                    <>
                        <div>
                            <TextInput
                                id="productName"
                                name="productName"
                                value={productName}
                                onChange={(event) => handleInputChange(event, "productName")} />
                        </div>
                    </>
                );
                break;
            }
            setModalContent(<><Modal.Body>{content}</Modal.Body></>);
            setOpenModal(true);
        }
    }, [formChange]);

输入变更处理函数 #

const handleInputChange = (event, fieldName) => {
    const { value } = event.target;
    console.log(fieldName, value);
    setFormData(prevState => ({
        ...prevState,
        [fieldName]: value
    }));
};

1. 将JSX元素存入状态是反模式：通过setModalContent把模态框内容存在状态中，每次状态更新都会重新创建整个模态框内容组件，导致输入框被卸载后重新挂载，直接丢失焦点。
2. useEffect依赖缺失：useEffect的依赖数组仅包含formChange，当formData更新（比如输入内容时），useEffect不会重新执行，模态框内的TextInput始终使用旧的productName值，导致视觉上无变化。
3. 未同步选中条目数据：点击编辑按钮时仅设置formChange为true，没有将选中条目的数据同步到formData中，导致表单初始值为空，后续输入的状态更新无法正确联动视图。

1. 移除ModalContent状态，直接在渲染时动态生成内容：不要把JSX元素存入状态，而是在组件的渲染逻辑中，根据formChange、selection和formData直接渲染模态框内容，这样状态更新时会自动重新渲染输入框，不会丢失焦点。
2. 修正编辑按钮的处理逻辑：点击编辑按钮时，不仅要设置formChange为true，还要将选中条目的数据同步到formData中。
3. 简化模态框渲染逻辑：将模态框内容的生成逻辑移到组件的return部分，无需通过useEffect间接处理。

修正后的核心代码示例：

// 点击编辑按钮的处理函数
const handleEdit = (selectedItem) => {
    // 将选中条目的数据填充到formData
    setFormData({
        productName: selectedItem.productName,
        productDescription: selectedItem.productDescription
    });
    setFormChange(true);
    setOpenModal(true);
};

// 组件渲染部分
return (
    <>
        {/* 表格部分 */}
        <Table>...</Table>

        {/* Flowbite Modal 直接渲染 */}
        <Modal show={openModal} onClose={() => setOpenModal(false)}>
            <Modal.Header>编辑产品</Modal.Header>
            {formChange && selection.toLowerCase() === "products" && (
                <Modal.Body>
                    <div>
                        <TextInput
                            id="productName"
                            name="productName"
                            value={productName}
                            onChange={(event) => handleInputChange(event, "productName")} />
                    </div>
                    {/* 其他表单字段 */}
                </Modal.Body>
            )}
            <Modal.Footer>
                <Button onClick={() => setOpenModal(false)}>取消</Button>
                <Button type="submit">保存</Button>
            </Modal.Footer>
        </Modal>
    </>
);

内容的提问来源于stack exchange，提问作者Timppa