比赛晋级
https://www.photophoto.cn/tupian/bisaijinjibiao.html
https://blog.csdn.net/m0_58293192/article/details/130752396
https://blog.csdn.net/GongWei_/article/details/119675911
https://www.lodashjs.com/docs/lodash.mergeWith#_mergewithobject-sources-customizer
https://segmentfault.com/a/1190000021187809
React Context说到底只是组件
当Context.Provider重新渲染的时候,它所有的子组件都被重新渲染了
for of 支持 return和 break,
缺点:没有 index
for of获取 index,用 entries(),
entries()返回一个可迭代的对象,包含数组的键值对 [key, value];迭代对象中的数组索引作为 key,数组元素作为 value
for in需要判断 hasOwnProperty
for (const item of arr) {}
for (const [index, item] of arr.entries()) {}
function showMessage(success) {
message.destroy();
message.success('禁用成功');
}
function propsEqual(oldProps, props) {
return isEqual(oldProps, props);
}
const values = {
user: {
name: '',
phone: [135, 136, 136]
}
}
<Form.List name="user">
{(fields, { add, remove }) => (
<>
<Item>
<Button type="dashed" onClick={() => add({
name: '',
phone: [{begin: '', end: ''}],
})} icon={<PlusOutlined/>}>
新增用户
</Button>
</Item>
{fields.map((field) => (
<div className="flex">
<Row gutter={16} key={field.key} className="flex-1">
<Col span={24}>
<Item
{...field}
name={[field.name, 'name']}
rules={[{ required: true, message: '请输入用户名' }]}
>
<Input />
</Item>
</Col>
<Col span={24}>
<Phone name={[field.name, 'phone']} />
</Col>
</Row>
<Button
type="link"
onClick={() => remove(field.name)}
>
<MinusCircleOutlined />
</Button>
</div>
))}
</>
)}
</Form.List>
//
<Form.List name="level1List">
{(level1Fields) => (
<div>
{level1Fields.map((level1Field, level1Index) => (
<Form.List name={[level1Field.name, 'level2List']} // notice here, using name path
{(level2Fields) => (
<div>
{level2Fields.map((level2Field, level2Index) => (
<Form.Item
name={[level2Field.name, 'key']} // notice the field name should be level2Field.name
>
<Input />
</Form.Item>
)}
</div>
)}
</Form.List>
)}
</div>
)}
</Form.List>
https://github.com/ant-design/ant-design/issues/23065
https://blog.csdn.net/zxz_learn/article/details/119896800
Phone 子节点
import React, { Fragment } from 'react';
import { array } from 'prop-types';
import { Form, Input, Row, Col, Button } from 'antd4';
import { PlusCircleOutlined, MinusCircleOutlined } from '@ant-design/icons';
const { Item } = Form;
Phone.propTypes = {
name: array.isRequired,
};
function Phone(props){
const { name } = props;
return (
<Form.List name={name}>
{(fields, { add, remove }) => (
<Fragment>
{fields.map((field) => (
<div className="flex">
<Row gutter={16} key={field.key} className="flex-1">
<Col span={12}>
<Item
{...field}
name={[field.name, 'begin']}
rules={[{ required: true, message: '请输入开始时间' }]}
>
<Input
placeholder="请输入开始时间"
/>
</Item>
</Col>
<Col span={12}>
<Item
{...field}
name={[field.name, 'end']}
rules={[{ required: true, message: '请输入结束时间' }]}
>
<Input
placeholder="请输入结束时间"
/>
</Item>
</Col>
</Row>
<div>
<Button
type="link"
onClick={() => remove(field.name)}
>
<MinusCircleOutlined/>
</Button>
<Button
type="link"
onClick={() => add({ begin: '', end: '' })}
>
<PlusCircleOutlined/>
</Button>
</div>
</div>
))}
</Fragment>
)}
</Form.List>
);
}
export default Phone;