帮酷LOGO
  • 显示原文与译文双语对照的内容
Using sweetalert in React

  • 源代码名称:sweetalert-react
  • 源代码网址:http://www.github.com/chentsulin/sweetalert-react
  • sweetalert-react源代码文档
  • sweetalert-react源代码下载
  • Git URL:
    git://www.github.com/chentsulin/sweetalert-react.git
  • Git Clone代码到本地:
    git clone http://www.github.com/chentsulin/sweetalert-react
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/chentsulin/sweetalert-react
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • sweetalert响应

    NPM versionDependency Status

    响应中的声明性 SweetAlert

    简介

    sweetalert-react 是带声明性反应风格组件api的包装式 sweetalert 。 上面有一个 show 支持,以确定警报应该显示,并且 onConfirmonCancelonCloseonEscapeKeyonOutsideClick 具有更多的控制。

    安装

    $ npm install sweetalert-react

    用法

    importReact, { Component } from'react';importSweetAlertfrom'sweetalert-react';//.. .render() {
     return (
     <div><button onClick={() =>this.setState({ show:true })}>Alert</button><SweetAlert
     show={this.state.show}
     title="Demo" text="SweetAlert in React" onConfirm={() =>this.setState({ show:false })}
     /></div> );
    }

    你应该从 cdn 。文件。node_modules(sweetalert/dist/sweetalert.css) 或者任何地方导入 sweetalert.css,可以找到css代码。

    签出完整示例在这里。

    删除了选项

    • 定时器: 你应该使用 setTimeout 并将 show 作为 false 传递。
    • closeOnConfirm: 你应该通过 onConfirmshow 传递为 false 。
    • closeOnCancel: 你应该通过 onCancelshow 传递为 false 。
    • allowEscapeKey: 你应该通过 onEscapeKeyshow 传递为 false 。
    • allowOutsideClick: 你应该通过 onOutsideClickshow 传递为 false 。

    可以通过props文档的 Configuare将所有其他选项作为道具传递。

    常见问题解答

    Q: 在浏览器中的'返回'或者'前进'时,我的通知没有关闭

    你可以以在挂载时侦听历史记录更改并设置 show: false 。 请参见这里的完整示例

    Q: 我可以使用响应组件来呈现弹出主体的html?

    当然,你可以用 ReactDOMServer.renderToStaticMarkup :

    import { renderToStaticMarkup } from'react-dom/server';<SweetAlert
     show={this.state.show}
     title="Demo" html
     text={renderToStaticMarkup(<HelloWorld />)}
     onConfirm={() =>this.setState({ show:false })}/>

    请参见这里的完整示例 感谢 @ArkadyB 在问题 #53 中发现这种方法。

    相关项目

    许可证

    MIT © C.T.




    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语