一.解决最好的问题就是form问题了，省了好多代码，但是也有很多小麻烦
1.创建，这里用的是class写代码，不带喜欢函数式写；
import { Form,} from "antd";
export default class NameCreate extends Component {
//这个地方必须要写：createFormRef自定义
createFormRef = React.createRef();
handleSubmitData = (value) => {
//这就是提交的数据
console.log(value)
}
render() {
return (
//createFormRef就是上面定义的，相当于定义dom的id
//如果调用提交的方法的话，采用：onFinish，onSubmit不生效；
<Form layout="vertical" onFinish={this.handleSubmitData} ref={this.createFormRef}>
<Form.Item
label="低值品名称："
name="lvName"//这个就是原来的键值
rules={[{ required: true, message: "请输入低值品名称" }]}//正则验证问题
getValueFromEvent={(event) => event.target.value.replace(/\s+/g, "")}//处理验证问题
>
<Input placeholder="请输入低值品名称" />
</Form.Item>
</Form>
)
}
}
2.form使用的时候如果验证失败，滚动到错误的地方
//这个地方必须要写：createFormRef自定义
createFormRef = React.createRef();
//错误提示
handleFinishFailed = ({ values, errorFields, outOfDate }) => {
this.createFormRef.current.scrollToField(errorFields[0].name.toString());
};
//提交按钮
handleSubmitData = (values) => {
let fileList = this.getUpload.state.fileList;
for (let index in values) {
if (values[index] === undefined) {
values[index] = "";
}
}
console.log(values);
};
<Form layout="vertical" onFinish={this.handleSubmitData} onFinishFailed={this.handleFinishFailed} ref={this.createFormRef}>
</Form
3.form使用的时候如果验证失败，滚动到错误的地方
//这个地方必须要写：createFormRef自定义
createFormRef = React.createRef();
//错误提示
handleFinishFailed = ({ values, errorFields, outOfDate }) => {
this.createFormRef.current.scrollToField(errorFields[0].name.toString());
};
//提交按钮
handleSubmitData = (values) => {
let fileList = this.getUpload.state.fileList;
for (let index in values) {
if (values[index] === undefined) {
values[index] = "";
}
}
console.log(values);
};
<Form layout="vertical" onFinish={this.handleSubmitData} onFinishFailed={this.handleFinishFailed} ref={this.createFormRef}>
</Form
4.如果你有后端测试接口，你前端需要代理后端接口才能进行测试数据
image.png
5.antd4.0以上版本如果在同一个js里面创建一个弹框form表单
{/* 添加项目计划Form */}
/*
projModel：开关
ProjFormLoading：loading，
handleProjOk：提交按钮
handleProjCancel：关闭按钮
*/
//添加项目计划弹框确定按钮
handleProjOk = (values, form) => {
console.log(values);
this.setState({
ProjFormLoading: true,
});
setTimeout(() => {
message.success("提交成功");
this.setState({
projModel: false,
ProjFormLoading: false,
});
form.resetFields();
}, 3000);
};
<ProjFormModal visible={projModel} confirmLoading={ProjFormLoading} onCreate={this.handleProjOk} onCancel={this.handleProjCancel} />
const ProjFormModal = ({ visible, onCreate, onCancel, confirmLoading }) => {
const [form] = Form.useForm();
return (
<Modal
visible={visible}
title="添加项目计划"
width={600}
closable={false}
destroyOnClose={true}
maskClosable={false}
onCancel={onCancel}
footer={[
<Button
key="submit"
type="primary"
loading={confirmLoading}
onClick={() => {
form.validateFields()
.then((values) => {
onCreate(values, form);
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
提交
</Button>,
<Button key="back" loading={confirmLoading} onClick={onCancel}>
取消
</Button>,
]}
>
<Form form={form} layout="vertical" name="ProjFormModal">
<Form.Item
label="项目名称："
name="prName"
rules={[{ required: true, message: "请输入项目名称" }]}
getValueFromEvent={(event) => event.target.value.replace(/\s+/g, "")}
>
<Input placeholder="请输入项目名称" disabled={confirmLoading} />
</Form.Item>
<Form.Item label="合同编号：" name="prUuid" getValueFromEvent={(event) => event.target.value.replace(/\s+/g, "")}>
<Input placeholder="请输入合同编号" disabled={confirmLoading} />
</Form.Item>
<Form.Item label="项目描述：" name="prDetail" getValueFromEvent={(event) => event.target.value.replace(/\s+/g, "")}>
<Input placeholder="请输入项目描述" disabled={confirmLoading} />
</Form.Item>
</Form>
</Modal>
);
};
6.form中多个数据关联验证
<Form.Item
label="价值："
name="aiNfap"
rules={[
{ required: true, message: "请输入价值" },
{ pattern: /^\d+(\.\d{1,2})?$/, message: "请输入小数点后两位的价值" },
{
validator: (rule, value) => {
let giValu = this.materialsForm.current.getFieldValue("giValu"),
aiFiap = this.materialsForm.current.getFieldValue("aiFiap");
let sum = Number(value) + Number(aiFiap);
if (Number(giValu) !== sum) {
return Promise.reject("error message");
} else {
return Promise.resolve();
}
},
},
]}
>
<InputNumber placeholder="请输入价值" max={99999999} style={{ width: "100%" }} />
</Form.Item>
7.关于用hooks后antd里面的model里面的form数据不清空问题，这个是真的坑
//1.主函数方法里面；
<AddFormModal
isModalVisible={state.isModalVisible}
confirmLoading={state.confirmLoading}
initialValuesData={state.record}
onCreate={onCreate}
onCancel={onCancel}
/>
//2.model里面
const AddFormModal = ({
isModalVisible,
onCreate,
onCancel,
confirmLoading,
initialValuesData
}) => {
const [form] = Form.useForm();
//这里就要监听弹框关闭的时候，但是我们没有销毁弹框，我们只需要把form清空即可
useEffect(async () => {
form.resetFields();
}, [isModalVisible]);
return <Modal
visible={isModalVisible}
title="新增明细"
width={800}
closable={false}
// 切记 这个属性千万别要，他是一关闭就销毁，但是form值还在，因为是hooks操作的，他还会在记录中，所以不要加
//destroyOnClose={true}
maskClosable={false}
footer={[
<Button
key="submit"
type="primary"
loading={confirmLoading}
onClick={() => {
form
.validateFields()
.then((values) => {
onCreate(values, form);
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
提交
</Button>,
<Button
key="back"
loading={confirmLoading}
onClick={() => {
form.resetFields();
onCancel(form);
}}
>
取消
</Button>,
]}
>
<Form
form={form}
layout="vertical"
name="FormModal1"
//核心属性加上
preserve={false}
initialValues={{
...initialValuesData
}}
>
<Form.Item
label="备注："
name="stMemo"
style={{ width: "90%" }}
getValueFromEvent={(event) =>
event.target.value.replace(/\s+/g, "")
}
>
<Input.TextArea rows={2} placeholder="请输入备注" />
</Form.Item>
</Form>
</Modal>
};
二.表格操作
1.antd Table表格超出部分隐藏并显示省略号，鼠标悬停时显示出td的所有内容
image.png
{
title: "备注", align: "center", dataIndex: "stMemo", onCell: () => {
return {
style: {
maxWidth: 100,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
cursor: 'pointer'
}
}
},
render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
},
网友评论