antd outofdate 表单_React+antd4.0相关问题，持续更新

一.解决最好的问题就是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不生效；

label="低值品名称："

name="lvName"//这个就是原来的键值

rules={[{ required: true, message: "请输入低值品名称" }]}//正则验证问题

getValueFromEvent={(event) => event.target.value.replace(/\s+/g, "")}//处理验证问题

>

)

}

}

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);

};

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);

};

4.如果你有后端测试接口，你前端需要代理后端接口才能进行测试数据

image.png