用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 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读
excel1 小时前
webpack 核心编译器 十四 节
前端
excel1 小时前
webpack 核心编译器 十三 节
前端
腾讯TNTWeb前端团队8 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰11 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪12 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪12 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy12 小时前
macOS 命令行 原生挂载 webdav 方法
前端