[英]React Typescript ant design selected drop down disable
我将我的大学项目用于反应 typescript 和 ant 设计 4,我对此有一些冲突。 这里是我的冲突
我有一个 Select 选项 1)年结束日期 2)年月结束日期。所以当它第一次加载时,任何人都知道如何在加载年结束日期时禁用并需要禁用结束日期 select 选项对此的任何解决方案
这是我的代码
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>
);
};
如果我正确理解了您的问题,那么您要问的是“如何禁用“结束日期”字段,如果“年终日期”字段的值为“年终日期”或组件首次加载时。
如果是这种情况,您可以使用反应挂钩来查找“年终日期”字段的值并使用它来禁用第二个字段
这是添加了钩子的代码: https://stackblitz.com/edit/react-xekm8s-plyist?file=index.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.