У меня есть таблица ANT внутри одной из форм, которые я разрабатываю.В этой таблице есть один выбор и 2 выбора даты.средства выбора даты должны быть отключены, когда в операторе выбора выбрано определенное значение.как я могу это сделать.пожалуйста, помогите.
const EditableContext = React.createContext();
const EditableRow = ({ form, index, ...props }) => (
<EditableContext.Provider value={form}>
<tr {...props} />
</EditableContext.Provider>
);
const EditableFormRow = Form.create()(EditableRow);
class EditableCell extends React.Component {
state = {
editing: false,
apiManager:[]
};
getInput = dataIndex => {
switch (dataIndex) {
case "type":
return (
case "req_type":
return (
<Select
ref={node => (this.input = node)}
onPressEnter={this.save}
onBlur={this.save}
placeholder="Select"
name="ftpidselect"
>
{req_type_dropdown.map(person => (
<Option value={person.name} label={person.name} key={person.name}>
{person.name}
</Option>
))}
</Select>
);
break;
case "validity_from":
return (
<input
type="date"
format="DD-MM-YYYY"
ref={node => (this.input = node)}
onPressEnter={this.save}
onBlur={this.save}
placeholder="Select"
style={{ height: 40, width: 120 }}
name="ftpidselect"
/>
);
break;
case "validity_to":
return (
<input
type="date"
format="DD-MM-YYYY"
ref={node => (this.input = node)}
onPressEnter={this.save}
onBlur={this.save}
placeholder="Select"
style={{ height: 40, width: 120 }}
name="ftpidselect"
/>
);
break;
default:
return (
<Input
ref={node => (this.input = node)}
onPressEnter={this.save}
onBlur={this.save}
placeholder="add data"
/>
);
break;
}
};
toggleEdit = () => {
const editing = !this.state.editing;
this.setState({ editing }, () => {
if (editing) {
this.input.focus();
}
});
};
save = e => {
const { record, handleSave } = this.props;
this.form.validateFields((error, values) => {
if (error && error[e.currentTarget.id]) {
return;
}
this.toggleEdit();
handleSave({ ...record, ...values });
});
};
renderCell = form => {
this.form = form;
const { children, dataIndex, record, title } = this.props;
const { editing } = this.state;
return editing ? (
<Form.Item style={{ margin: 0 }}>
{form.getFieldDecorator(dataIndex, {
rules: [
{
required: true,
message: `${title} is required`
}
],
initialValue: record[dataIndex]
})(this.getInput(dataIndex))}
</Form.Item>
) : (
<div
className="editable-cell-value-wrap"
style={{ paddingRight: 24 }}
onClick={this.toggleEdit}
>
{children}
</div>
);
};
render() {
const {
editable,
dataIndex,
title,
record,
inputType,
index,
handleSave,
children,
...restProps
} = this.props;
return (
<td {...restProps}>
{editable ? (
<EditableContext.Consumer>{this.renderCell}</EditableContext.Consumer>
) : (
children
)}
</td>
);
}
}
export class IDrequesttable extends React.Component {
constructor(props) {
super(props);
this.state = {
backupof: [],
data: []
};
this.columns = [
{
title: "Requirement Type",
dataIndex: "req_type",
align: "center",
width: 180,
editable: true
},
{
title: "Validity From",
dataIndex: "validity_from",
align: "center",
width: 130,
editable: true
},
{
title: "Validity To",
dataIndex: "validity_to",
align: "center",
width: 130,
editable: true
},
];
this.state = {
dataSource: [
{
key: "0"
}
],
count: 1
};
}
handleAdd = () => {
const { count, dataSource } = this.state;
console.log("datasource.....", this.state);
const newData = {
key: count
};
this.setState({
dataSource: [...dataSource, newData],
count: count + 1
});
};
handleSave = row => {
const newData = [...this.state.dataSource];
const index = newData.findIndex(item => row.key === item.key);
const item = newData[index];
newData.splice(index, 1, {
...item,
...row
});
this.setState({ dataSource: newData });
ftpid = Array.from(newData);
};
render() {
const { dataSource } = this.state;
const components = {
body: {
row: EditableFormRow,
cell: EditableCell
}
};
const columns = this.columns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: record => ({
record,
editable: col.editable,
dataIndex: col.dataIndex,
inputType: col.dataIndex === "folder_owner" ? "email" : "text",
title: col.title,
handleSave: this.handleSave
})
};
});
return (
<div>
<Table
components={components}
rowClassName={() => "editable-row"}
bordered
dataSource={dataSource}
columns={columns}
size='small'
// scroll={{x:1500}}
style={{ overflowX: "scroll" }}
/>
<Button
onClick={this.handleAdd}
style={{ marginTop: 16, float: "right" }}
>
Add a row
</Button>
</div>
);
}
}
Я пытался использовать глобальную переменную для переключения отключенных в средствах выбора даты, но это не сработало.