React Carbon TextInput放置在嵌套模式中，对于原生应用程序不可编辑

bvjxkvbb 于 2023-10-22 发布在 React

关注(0)|答案(3)|浏览(107)

我是React的新手，Tauri框架用于将我的React应用程序打包为桌面应用程序。我正在使用React Carbon组件，放置在模态中的TextInput字段在浏览器中工作，但当我将应用程序打包为桌面时则不起作用。

请不要将此问题标记为重复。我尝试了所有建议的答案中的解决方案，但它们不起作用，因为我的用例不同（问题只与桌面应用程序有关，而不是浏览器）。我尝试通过props设置值，但设置值后输入仍然不可编辑。

我在onChange函数中添加了一个日志记录器，但它根本没有被调用。

**编辑-**发现TextInput只有在嵌套模式下才不可编辑。也就是说，通过单击第一个模态上的按钮打开第二个模态。

如果有帮助-我在macOS上运行桌面应用程序。

import React, { useState } from "react";
import { Modal, TextInput, Tabs, Tab } from "carbon-components-react";
import { Button, TabList, TabPanel, TabPanels } from "@carbon/react";

function func(props) {

   const [showAddAddressModal, setShowAddAddressModal] = useState(false);
   const [address, setAddress] = useState(props.address);

   const onAddressChange = (event) => {
        let val = event.target.value;
        setAddress(val);
    };

    const onClickAddAddress = () => {
        setShowAddAddressModal(true);
    };

    return(
        {showFirstModal && (
            <Modal
                passiveModal
                size="sm"
                open={showFirstModal}
                modalHeading="Settings"
                onRequestClose={closeFirstModal}
            >
                <Tabs>
                    <TabList>
                        <Tab>Addresses</Tab>
                    </TabList>
                    <TabPanels>
                        <TabPanel>
                            <div>
                                <Button onClick={onClickAddAddress} size="md">
                                        Add New
                                </Button>
                            </div>
                        </TabPanel>
                    </TabPanels>
                </Tabs>
            </Modal>
        )}
        {showAddAddressModal && (
             <Modal
                size="md"
                open={showAddAddressModal}
                modalHeading="Add Address"
                primaryButtonText="Add"
                secondaryButtonText="Cancel"
                onRequestClose={closeAddAddressModal}
                onRequestSubmit={addAddress}
             >

                <TextInput
                    id="address-text"
                    labelText="Address"
                    value={address}
                    autoComplete="off"
                    onChange={onAddressChange}
                 />
            </Modal>
        )}
    );
}

export default func;

如何将此文本字段修复为可编辑？

react-native

来源：https://stackoverflow.com/questions/77330510/react-carbon-textinput-placed-in-nested-modal-uneditable-for-native-app

3条答案

按热度按时间

jxct1oxe1#

我对Tauri框架并不熟悉，但我的第一步是为您在onChange函数中阅读的“事件”创建一个console.log，看看那里返回了什么。

赞(0）回复(0）举报 2023-10-22

shyt4zoc2#

看起来你有一个功能组件，呈现两个模态。在第二个模式中，你有一个地址组件，但是它没有更新，因为的值prop被设置为address，并且你没有正确处理地址字段的状态。您还缺少setState函数来更新地址。
从React导入useState钩子：
import React，{ useState } from“react”;
初始化地址字段的状态变量和状态更新函数。当你想显示第二个模态时，你还应该确保showAddAddressModal被设置为true：

function func(props) {
const [showAddAddressModal, setShowAddAddressModal] = useState(false);
const [address, setAddress] = useState(props.address);

// ...

const onAddressChange = (event) => {
let val = event.target.value;
setAddress(val);
};

// ...
}

在组件中，将value prop绑定到address state，将onChange prop绑定到onAddressChange函数，使其可编辑：

<TextInput
id="address-text"
labelText="Address"
value={address}
autoComplete="off"
onChange={onAddressChange}
/>

赞(0）回复(0）举报 2023-10-22

gorkyyrv3#

该问题不是由状态或代码引起的。我需要做的就是关闭第一个模态，这样第二个模态就会成为焦点。
这是有意义的，因为所有其他模态中的文本字段都可以工作，因为这是唯一打开的模态。但是当第二个模态被打开时，如果我可以说，焦点并没有转移到第二个模态。
我不确定这个属性是什么，但这是我如何让它工作的。
代码方面，我做了这个改动-

const onClickAddAddress = () => {
   setShowAddAddressModal(true);   // Open second modal
   setShowFirstModal(false);       // Close first modal
};

const addAddress = () => {
    ...
    setShowAddAddressModal(false);    // Close second modal after performing actions
    // You can open the first modal if required
};

赞(0）回复(0）举报 2023-10-22

我来回答

React Carbon TextInput放置在嵌套模式中，对于原生应用程序不可编辑

3条答案

相关问题

热门标签

最新问答