场景

Node-RED简介与Windows上安装、启动和运行示例：

Node-RED简介与Windows上安装、启动和运行示例_霸道流氓气质的博客-CSDN博客

Node-RED怎样导出导入流程为json文件：

Node-RED怎样导出导入流程为json文件_霸道流氓气质的博客-CSDN博客

Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度：

Node-RED安装图形化节点dashboard实现订阅mqtt主题并在仪表盘中显示温度_霸道流氓气质的博客-CSDN博客

在上面的基础上怎样使用Button按钮组件和TextInput文字输入组件。

注：

博客：
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、拖拽编辑Button组件，使其点击时输出1

2、拖拽TextInput组件并编辑

3、Json数据

[
    {
        "id": "f4a4d8eab7935bc8",
        "type": "tab",
        "label": "流程 3",
        "disabled": false,
        "info": "",
        "env": []
    },
    {
        "id": "b704c867.534e98",
        "type": "ui_button",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "group": "248cbbb0.18e794",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": false,
        "label": "开启",
        "tooltip": "",
        "color": "",
        "bgcolor": "",
        "className": "",
        "icon": "",
        "payload": "1",
        "payloadType": "num",
        "topic": "topic",
        "topicType": "msg",
        "x": 290,
        "y": 140,
        "wires": [
            [
                "bfd300fc.9119b"
            ]
        ]
    },
    {
        "id": "bfd300fc.9119b",
        "type": "debug",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "payload",
        "targetType": "msg",
        "statusVal": "",
        "statusType": "auto",
        "x": 480,
        "y": 140,
        "wires": []
    },
    {
        "id": "3d808cbd.363e64",
        "type": "ui_text_input",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "label": "输入姓名:",
        "tooltip": "",
        "group": "248cbbb0.18e794",
        "order": 0,
        "width": 0,
        "height": 0,
        "passthru": true,
        "mode": "text",
        "delay": 300,
        "topic": "topic",
        "sendOnBlur": true,
        "className": "",
        "topicType": "msg",
        "x": 300,
        "y": 240,
        "wires": [
            [
                "9b262bb1.709268"
            ]
        ]
    },
    {
        "id": "9b262bb1.709268",
        "type": "debug",
        "z": "f4a4d8eab7935bc8",
        "name": "",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 500,
        "y": 240,
        "wires": []
    },
    {
        "id": "248cbbb0.18e794",
        "type": "ui_group",
        "name": "MyGroup",
        "tab": "3f79c420.cfc1bc",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false
    },
    {
        "id": "3f79c420.cfc1bc",
        "type": "ui_tab",
        "name": "Home",
        "icon": "dashboard",
        "disabled": false,
        "hidden": false
    }
]

4、访问ui页面

http://127.0.0.1:1880/ui

点击Button,并在输入框输入文字