实现:
<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实现:
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 。