1.onClick(e)
自定义点击事件的处理方法。如处理 <a>
标签一样 - 调用 e.preventDefault()
来防止过度的点击,同时 e.stopPropagation()
可以阻止冒泡的事件。
2.setTimeout就是被放入异步任务队列中,等待主线程的任务执行完毕后再到主线程中执行。适用于当页面渲染state,建立ref完成后,使用监听器时候可以套用setTimeout.效果如下:
useEffect(() => {
setTimeout(() => {
if (JSON.stringify(selectItem) != '{}') {
switch (selectItem?.configType) {
case '1':
setFormArr(configForm);
console.log(selectItem, fzRef?.current?.comFormRef()?.current, 'selectItem');
fzRef?.current?.comFormRef()?.current?.setFieldsValue({ configName: 1, ...selectItem });
break;
case '2':
setFormArr(configForm);
break;
case '3':
setFormArr(configForm);
break;
default:
break;
}
}
}, 0);
}, [selectItem, visible]);
注意: 如果不套用,则不知道feRef是什么东西
3.
a.单一组件设置为中文
import zhCN from 'antd/es/date-picker/locale/zh_CN'; // 引入中文包
// 组件添加 locale 属性
<DatePicker locale={zhCN} />; // 设置为中文
b.注意:DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是从 value 中读取,需要先正确设置 moment 的 locale。
// 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />;
c.ConfigProvider全局化配置:
ConfigProvider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。
import {Form, Input, Select, Row, Col, Checkbox, Button, AutoComplete, LocaleProvider, DatePicker, ConfigProvider } from 'antd'; // Ant
import zhCN from 'antd/es/locale/zh_CN'; // 引入语言包
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn'); // 注意这里设置 moment 必须放在有 import 的后面。
const { RangePicker } = DatePicker;
class Page extends React.Component {
return (
<div className="locale-components">
<ConfigProvider locale={zhCN}> // 设置 local 为中文。
<h3 className={`mb-10`}>时间流程</h3>
<div className={`module-content`}>
<Row gutter={35}>
<Col span={12}>
<Form.Item label={
<span>
报名时间
</span>
} labelCol={{span: 4}} wrapperCol={{span: 20}}>
<RangePicker
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder={['开始时间', '结束时间']}
onChange={onChange}
onOk={onOk}
/>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label={
<span>
初试时间
</span>
} labelCol={{span: 4}} wrapperCol={{span: 20}}>
<RangePicker
showTime={{ format: 'HH:mm' }}
format="YYYY-MM-DD HH:mm"
placeholder={['开始时间', '结束时间']}
onChange={onChange}
onOk={onOk}
/>
</Form.Item>
</Col>
</Row>
</div>
</ConfigProvider>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);