时间戳

首页 > 解决方案 > 如何使函数在 onclick 中使用

javascript - 如何使函数在 onclick 中使用

问题描述

我正在尝试制作 2 个函数以在 onclick 事件中使用。

我在stackoverflow中找到的表格是这样的。

onclick={()=>{ f1(); f2() }}

我想让 f1() 显示其中包含图像的模态。我做的代码是这样的。

function f2() {
 setIsOpen(!isOpen);
 return(){
 <Modal isOpen={isOpen} >
   <div className='put_img'>
   <img src='img/img8.jpg' style={{ width: "100%" }} />
   </div>
 </Modal>
}}

它不工作。可以帮助使用此代码吗？谢谢你

标签： javascriptreactjs

解决方案

你不会在 React 的点击处理程序中渲染元素。相反，您设置了一个状态成员（您似乎正在这样做），并在您的主要组件功能中使用该状态成员来决定是否呈现您想要显示的内容。

所以

const YourComponent = () => {
    const [isOpen, setIsOpen] = useState(false);

    const f1 = () => {
        // ...whatever f1 does...
    };

    const f2 = () => {
        setIsOpen(o => !o); // Generally best to use the callback version when setting based on existing state
    };

    // ...
    return (
        <YourOtnerStuff onClick={() => { f1(); f2(); }} />
        <Modal isOpen={isOpen} >
            <div className='put_img'>
                <img src='img/img8.jpg' style={{ width: "100%" }} />
            </div>
        </Modal>
    );
};

当你设置状态时，React 会再次调用你的组件函数来重新渲染。你会得到你设置的值useState。

推荐阅读