how can i get Select option value in antd - antd

Question

I have two select drop downs. If I click on One select option, it should be select and after click, without clicking second dropdown, i am not suppose to click update button. It should be show error.
import React from 'react'
import ReactDOM from 'react-dom'
import { Select, Button } from 'antd';
const Option =Select.Option
class SelectOption extends React.Component{
handleTeacherChange=(value)=>{
console.log(value)
}
handleCourseChange=(value)=>{
console.log(value)
}
render()
{
return(
<div align="center">
<div>
<h2>Shishu Bharathi</h2>
<label>Teacher List :</label>
<Select defaultValue="Select" style={{ width: 120 }} onChange={this.handleTeacherChange}>
<Option value="Vikram">Vikram</Option>
<Option value="Ramesh">Ramesh</Option>
</Select>
<label>Course List :</label>
<Select defaultValue="Select" style={{ width: 120 }} onChange={this.handleCourseChange}>
<Option value="cul1a">CUL1A</Option>
<Option value="cul1b">CUL1B</Option>
</Select>
</div>
<br></br>
<br></br>
<Button >Update</Button>
</div>
)
}
}
export default SelectOption

Answer 1

Use validateFields to check if a field is empty or not.
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 (
<div align="center">
<div>
<h2>Shishu Bharathi</h2>
<label>Teacher List :</label>
<Form.Item>
{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();
}
}
]
})(
<Select
style={{ width: 120 }}
onChange={this.handleTeacherChange}
>
<Option value="Vikram">Vikram</Option>
<Option value="Ramesh">Ramesh</Option>
</Select>
)}
</Form.Item>
<label>Course List :</label>
<Form.Item>
{getFieldDecorator("Dropdown2", {
initialValue: "Select",
rules: [
{ required: true, message: "Select the course" },
{
validator: (rule, value, callback) => {
if (value === "Select") {
callback("Select the course");
}
callback();
}
}
]
})(
<Select style={{ width: 120 }} onChange={this.handleCourseChange}>
<Option value="cul1a">CUL1A</Option>
<Option value="cul1b">CUL1B</Option>
</Select>
)}
</Form.Item>
</div>
<br />
<br />
<Button onClick={this.updateClick}>Update</Button>
</div>
);
}
}
const A = Form.create()(SelectOption);
ReactDOM.render(<A />, document.getElementById("container"));
Here is a working demo :CodeSandbox

Answer 2

If you want show error when without clicking second dropdown, you need wrap it using formItem and validate it. Like follow code:
<FormItem
{...formItemLayout}
label={'month'}
>
{this.props.form.getFieldDecorator('loanMonth', {
initialValue: 3,
rules: [{
required: true, message: 'please select month！',
}],
})(
<Select>
{
this.formInitData &&
toJS(this.formInitData).loanMonthList.map((data) => {
return (
<Option value={data.key}>{data.value}</Option>
);
})
}
</Select>,
)}
</FormItem>
using the rules: [{required: true, message: 'please select month！'}] to get it.
Suggesting you see https://ant.design/components/form/