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

相关推荐
慧一居士12 分钟前
CSS3 全部功能点介绍,使用场景,对应功能点完整使用示例
前端
烛阴15 分钟前
深入Lua包(Package)与依赖管理
前端·lua
IT_陈寒28 分钟前
5个Vue3性能优化技巧,让你的应用提速50% 🚀(附实测对比)
前端·人工智能·后端
god0030 分钟前
chromium项目中添加源文件(BUILD.gn项目中添加源文件)
java·服务器·前端
快乐非自愿40 分钟前
Vue 缓存之坑,变量赋值方式和响应式数据
前端·vue.js·缓存
Github掘金计划40 分钟前
别再用 “臃肿监控” 了!这款轻量监控神器开源 3 月狂揽 1.3k Star!
前端·监控
努力学习的少女1 小时前
SpaekSql函数
前端·数据库
摸着石头过河的石头1 小时前
错误处理:构建健壮的 JavaScript 应用
前端·javascript
w_y_fan1 小时前
flutter_native_splash: ^2.4.7
android·前端·flutter
穿花云烛展1 小时前
项目实战4:奇思妙想console
前端