用react实现radio同时关联proform组件

实现:

javascript 复制代码
<ProFormRadio.Group
      radioType={'button'}
      name={['bodyConfig', 'format']}
      label="请求体格式"
      initialValue={'json'}
      options={createTabs}
      fieldProps={{
        buttonStyle: 'solid',
        wrapperMarginInlineEnd: 20,
        onChange: e => {
          let v = e.target.value;
          databaseModalFormRef.current?.setFieldValue('format', v);
        },
      }}
    />

用react.js实现:

javascript 复制代码
const changeItem = (value) => {
    setTab(value);
    databaseModalFormRef.current?.setFieldsValue({ bodyConfig: { format: value } });
  }


<ProFormItem noStyle name={['bodyConfig', 'format']} initialValue={'json'}>
      请求体格式:
      <div className={'request_create_tab_items_json'}>
        <div onClick={e=>{ changeItem('json') }} className={`request_create_tab_item_json ${tab == 'json'?'request_create_tab_item_active_json':''}`}>
          json
        </div>
        <div onClick={e=>{ changeItem('form') }} className={`request_create_tab_item_json ${tab == 'form'?'request_create_tab_item_active_json':''}`}>
          form-data
        </div>
        <div onClick={e=>{ changeItem('text') }} className={`request_create_tab_item_json ${tab == 'text'?'request_create_tab_item_active_json':''}`}>
          text
        </div>
      </div>
    </ProFormItem>

作用:使用组件修改样式复杂,改用react.js来写优化了界面卡顿问题。

思路总结:重点在于使用 setFieldsValue 来更新,这样就能更新 bodyConfig 。

相关推荐
程序员爱钓鱼1 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel8 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着9 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友10 小时前
什么是API签名?
前端·后端·安全
会豪12 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子12 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶12 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子12 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_13 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233313 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts