Question

我有两个选择下拉菜单。如果我单击一个选择选项，则应选择它，然后单击后不单击第二个下拉菜单，我不应该单击更新按钮。应该显示错误。

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>
            &nbsp;

                <Select defaultValue="Select" style={{ width: 120 }} onChange={this.handleTeacherChange}>
                <Option value="Vikram">Vikram</Option>
                <Option value="Ramesh">Ramesh</Option>
                </Select>

                &nbsp;  &nbsp;   
                <label>Course List :</label>
            &nbsp;

                <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

如果要在不单击第二个下拉菜单时显示错误，则需要使用formItem对其进行包装并进行验证。像下面的代码：

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

使用rules: [{required: true, message: 'please select month！'}]来获取它。建议您看到https://ant.design/components/form/

Answer 2

使用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 (
      <div align="center">
        <div>
          <h2>Shishu Bharathi</h2>
          <label>Teacher List :</label>
          &nbsp;
          <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>
          &nbsp; &nbsp;
          <label>Course List :</label>
          &nbsp;
          <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"));

这是一个有效的演示：CodeSandbox

我如何获得antd中的Select option值

2 个答案: