用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 。

相关推荐
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
蓝婷儿8 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl