时间戳

首页 > 解决方案 > 根据点击事件显示 React 组件

javascript - 根据点击事件显示 React 组件

问题描述

我正在尝试根据在 React 中传递按钮文本的单击事件来呈现两个不同的组件。我知道在函数中怎么做，但是如何根据点击事件渲染 DOM 元素呢？到目前为止，我有：

const Popup: React.FunctionComponent = () => {

    const [visible, setVisible] = React.useState<boolean>(false);

    const toggleDialog = (e: React.MouseEvent<HTMLButtonElement>) => {
        if (e.currentTarget.textContent === 'Primary') {
            setVisible(!visible);
            console.log(e.currentTarget.textContent);
            return (
               <div>
               <p>{e.currentTarget.textContent}</p>
               </div>
            )
        } else {
            console.log(e.currentTarget.textContent);
            setVisible(!visible);
            return (
                <div>
                <p>{e.currentTarget.textContent}</p>
                </div>
            )
        }
    };

    const closeDialog = () => {
        setVisible(false);
    };

    return (
        <>
            <Button variant="primary" onClick={toggleDialog}>Primary</Button>
            <Button variant="secondary" onClick={toggleDialog}>secondary</Button>
            {visible && <Dialog title={"Please confirm"} onClose={closeDialog}>
                {toggleDialog}
                <DialogActionsBar>
                    <button className="button" onClick={toggleDialog}>No</button>
                    <button className="button" onClick={toggleDialog}>Yes</button>
                </DialogActionsBar>
            </Dialog>}
        </>
    )
}

export default Popup;

标签： javascriptreactjstypescript

解决方案

最后我这样做了：

 const [visible, setVisible] = React.useState<boolean>(false);
    const [content, setContent] = React.useState<string>('Primary');

    const toggleDialog = (e: React.MouseEvent<HTMLButtonElement>) => {
        setVisible(!visible);
        if (e.currentTarget.textContent === 'Primary') {
            setContent('Primary');
        } else {
            setContent('Secondary');
        }
    };

    const closeDialog = () => {
        setVisible(false);
    };

    return (
        <>
            <Button variant="primary" onClick={toggleDialog}>Primary</Button>
            <Button variant="secondary" onClick={toggleDialog}>Secondary</Button>
            {visible && <Dialog title={"Please confirm"} onClose={closeDialog}>
                {content === 'Primary' && (
                    <p>This is the first component</p>
                )}
                {content === 'Secondary' && (
                    <p>This is the second component</p>
                )}

                <DialogActionsBar>
                    <p>Content action bar</p>
                </DialogActionsBar>
            </Dialog>}
        </>
    )
};

推荐阅读