反应 Typescript ant 设计选择下拉禁用

Question

Im using my university project for the react typescript and ant design 4, I have some conflict on this. here the my conflict

I have a Select option 1) Year End Date 2) Year Month End Date.so when it loading first any one know how to disable when the loading Year End Date and need to disable end date select option any solution for this

stazkblitz here

here the my code

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Checkbox,Select } from 'antd';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};
const { Option } = Select
const Demo = () => {
  const onFinish = (values) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
function onChange(value) {
  console.log(`selected ${value}`);
}

function onBlur() {
  console.log('blur');
}

function onFocus() {
  console.log('focus');
}

function onSearch(val) {
  console.log('search:', val);
}
  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      <Form.Item
        label="Year End date"
        name="YearEndDate"
        rules={[
          {
            required: true,
            message: 'Please select date type!',
          },
        ]}
      >
   <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a Year End date"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
    <Option value="yDate">Year End Date</Option>
    <Option value="yDM">Year Month End Date</Option>

  </Select>,
      </Form.Item>

      <Form.Item
        label="End Date"
        name="endDate"
        rules={[
          {
            required: true,
            message: 'Please seelct date!',
          },
        ]}
      >
       <Select
    showSearch
    style={{ width: 200 }}
    placeholder="Select a date"
    optionFilterProp="children"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
    onSearch={onSearch}
    filterOption={(input, option) =>
      option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
    }
  >
  <Option value="date1">28</Option>
    <Option value="date2">30</Option>
    <Option value="date3">31</Option>
    
  </Select>
      </Form.Item>

     

      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

Answer 1

If I've understood your question correctly, what you're asking is "how to disable "End Date " field, if the value of the "Year End date" field is "Year End Date" or when the component is first loading.

If that is the case, you can use react hooks to find the value of the "Year End Date" field and use it to disable the second field

Here's your code with the hook added: https://stackblitz.com/edit/react-xekm8s-plyist?file=index.js