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

实现：

<ProFormRadio.GroupradioType={'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实现：

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 。