首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >React类型记录ant设计选择下拉禁用

React类型记录ant设计选择下拉禁用
EN

Stack Overflow用户
提问于 2021-02-12 03:40:41
回答 1查看 1.7K关注 0票数 0

我正在使用我的大学项目的反应打字稿和蚂蚁设计4,我有一些冲突的这一点。在这里我的冲突

我有一个选择选项1)年终日期2)当它第一次加载时任何一个人都知道如何在加载Date.so时禁用年终日期并需要禁用结束日期选择任何解决方案

斯塔兹克布利茨

这里是我的密码

代码语言:javascript
复制
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>
  );
};
EN

回答 1

Stack Overflow用户

发布于 2021-02-12 03:58:26

如果我正确理解了您的问题,您所问的是“如何禁用”“结束日期”字段,如果“年度结束日期”字段的值为“年度结束日期”,或者组件首次加载时。

如果是这样的话,您可以使用查找“年度结束日期”字段的值,并使用它禁用第二个字段。

下面是添加钩子的代码:https://stackblitz.com/edit/react-xekm8s-plyist?file=index.js

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66166049

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档