1. 弹窗销毁后再打开，原来的值仍存在，如何销毁弹窗内容？
解决： 加destroyOnClose 属性，关闭时销毁子元素。再次打开内容就清空了~
<Modaltitle="新增对账流水"visible={visible} onOk={() => { formRef.current.handleSubmit(); }} onCancel={onClose} okText="确认"cancelText="取消"width={800} destroyOnClose// 关闭时销毁子元素>
如果是使用antd中的form，上述方法不起效时，将form重置：
form.resetFields(); // hooks中或者this.props.form.resetFields(); // class中this.formRef.current?.resetFields(); // class中
2. 在Select组件options中找到目标项的value。
通常下拉的结构是：
options= [ { id:1,name:'zhangsan' },] <Selectstyle={{ width: '100%' }} placeholder="请选择"allowCleardisabled={!!detailData?.id} > {options?.map(item=> ( <Optionvalue={item.id} key={item.name}> {item.name} </Option> ))} </Select>
findName=(val,options)=>{ consttargetOption=options.find(item=>item.value=>val); returntargetOption.name; }
3.React学习之antd中读取与设置表单值
1.antd基础组件用法
const { form: { getFieldDecorator }, } =this.props; <FormItemlabel="开始卡号" {formLayout}> {getFieldDecorator('startNumber', { rules: [{ required: true, message: '请输入开始卡号' }], initialValue: record&&record.startNumber?record.startNumber : '', })(<Inputplaceholder="请输入开始卡号"style={{ width: '100%' }} />)}</FormItem>// 获取form表单的值form.validateFields((err, fieldsValue) => { if (err) return; console.log("fieldsValue",fieldsValue) });
<Formref={this.formRef}><FormItemlabel="摘要："name="remark"><Inputplaceholder="请输入摘要"style={{ width: '100%' }} allowClear/></FormItem></Form>// 设置值this.formRef.current?.setFieldsValue({ remark: 'XXX'), }); // 获取值constvalue=this.formRef.current?.getFieldValue();
2.自定义组件用法
// 父组件<FormItemlabel="" {bigInputLayout} name="tagContent"initialValue={{ items: [''], checkedItems: [], checkedTexts: [] }} valuePropName="tagContent"><PriceTagContent// 自定义组件getPriceTagRef={(ref) => { this.priceTagRef=ref; }} /></FormItem>// 子组件addItemList=()=>{ // 表单自定义子组件会加入onchange方法const { onChange } =this.props; constnewCheckedTexts= [checkedTexts]; constitem= []; constcheckedItems= []; // 通过onchange方法更新父组件表单中的tagContentonChange({ items: item, checkedTexts: newCheckedTexts, checkedItems }); } <InputallowCleardefaultValue={record.text} value={record?.text} // disabled={isDiss}onChange={(e) => { this.addItemList(record, e.target.value); }} />
4. Upload上传文件（重要）！
在Upload组件中经常用的就是受控的显示和上传。 我经常遇到的是这种情况：完全受控组件。 这样一定要记得：
- 设置
fileList属性。它决定了文件列表默认显示什么，以及上传后显示什么！ onChange方法的其中两个重要且常用的参数：file、fileList。参数解释如下：
file：当前操作的文件对象。{ uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突name: 'xx.png'// 文件名status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性response: '{"status": "success"}', // 服务端响应内容linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性} fileList：当前的文件列表。
render() { constprops= { action: 'https://xxxxx.com', onChange: ({ file, fileList})=>{}, multiple: true, }; return ( <Upload {props} fileList={this.state.fileList}><Buttonicon={<UploadOutlined/>}>Upload</Button></Upload> ); }
props就是文件上传的各种属性，不熟的话要自己点链接看官网。 API参考：Ant Design 的 Upload
5. Tab页切换，数据没刷新？
场景：两个Tab页，每个里面都有表格，切换Tab，给Table赋值DataSource时，数据正确但页面未刷新。 我的Tab内容没有抽出组件，在一个文件中写的。原因： React需要唯一识别符，没有唯一标识符。解决：给每一个Table加key；将Tab的内容抽为子组件。
