我爱平铺

antd插件prompt:快速弹出请求输入框

有时候需要快速弹出一个对话框请求输入,比如点击修改用户名后弹出一个“请输入用户名”,也就是原生js的prompt函数的功能。这个包可以调用antd的Modal等组件,方便调用,无需自己写一套state。

预览

npm i antd-prompt

codesandbox链接

import React, { component } from 'react';
import ReactDOM from 'react-dom';
import prompt from 'antd-prompt';
import { Button, message } from 'antd';

class App extends Component {
    handler = async () => {
        try {
            const name = await prompt({
                title: "Please enter name",
                placeholder: "Your name",
                rules: [
                    // check this link for more help: https://ant.design/components/form/#Validation-Rules
                    {
                        required: true,
                        message: "You must enter name"
                    }
                ],
                modalProps: {
                    width: '80%'
                }
            });
        } catch (e) {
            message.error('Please enter name');
        }
    }
    render() {
        return <div>
            <Button onClick={this.handler}>Set Name</Button>
        </div>
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

GitHub Repo: https://github.com/wangsijie/antd-prompt

文章原始链接:https://sijie.wang/posts/antd-prompt/

本站文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议,转载请保留原始链接