本文展示了如何在antd的Select组件中处理多选值，并通过validateFields进行字段验证。在SelectOption组件中，当教师列表选择'Select'而课程不为空，或者课程选择'Select'而教师不为空时，会触发特定字段的验证。
使用validateFields检查字段是否为空。
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select, Button, Form } from "antd";
const Option = Select.Option;
class SelectOption extends React.Component {
handleTeacherChange = value => {
console.log(value);
// this.props.form.validateField(["Dropdown2"]);
};
handleCourseChange = value => {
console.log(value);
// this.props.form.validateField(["Dropdown1"]);
};
updateClick = () => {
const { getFieldValue, validateFields } = this.props.form;
const dropdown1Value = getFieldValue("Dropdown1");
const dropdown2Value = getFieldValue("Dropdown2");
if (dropdown1Value === "Select" && dropdown2Value !== "Select") {
validateFields(["Dropdown1"]);
}
if (dropdown1Value !== "Select" && dropdown2Value === "Select") {
validateFields(["Dropdown2"]);
}
};
render() {
const { getFieldDecorator } = this.props.form;
return (
Shishu Bharathi
Teacher List :
{getFieldDecorator("Dropdown1", {
initialValue: "Select",
rules: [
{ required: true, message: "Select the teacher" },
{
validator: (rule, value, callback) => {
console.log("value", value);
if (value === "Select") {
callback("Select the teacher");
}
callback();
}
}
]
})(
style={{ width: 120 }}
onChange={this.handleTeacherChange}
>
Vikram
Ramesh
)}
Course List :
{getFieldDecorator("Dropdown2", {
initialValue: "Select",
rules: [
{ required: true, message: "Select the course" },
{
validator: (rule, value, callback) => {
if (value === "Select") {
callback("Select the course");
}
callback();
}
}
]
})(
CUL1A
CUL1B
)}
Update
);
}
}
const A = Form.create()(SelectOption);
ReactDOM.render(, document.getElementById("container"));
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
