I am developing a multi-page form using antd package to add some style
In the main page of the form, I wrote the following code (I imported everything that I need before!).
export class CreateNewContract extends Component {
constructor(props) {
super(props);
this.state = {
step: 1,
someData: '',
};
}
nextStep = () => {
const { step } = this.state;
this.setState({
step: step + 1,
});
};
prevStep = () => {
const { step } = this.state;
this.setState({
step: step - 1,
});
};
handleChange = input => e => {
this.setState({ [input]: e.target.value });
};
render() {
const { step } = this.state;
const {
someData,
} = this.state;
const values = {
someData,
};
switch (step) {
case 1:
return (
<TypeContract
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
);
case 2:
return (
<Pricing
nextStep={this.nextStep}
handleChange={this.handleChange}
values={values}
/>
);
default:
return <div>Error!</div>;
}
}
}
export default CreateNewContract;The first step componend code is implemented using the switch toggles available on antd package. It looks like this:
export class TypeContract extends Component {
continue = e => {
e.preventDefault();
this.props.nextStep();
}
render() {
const { values, handleChange } = this.props;
return (
<div>
<h2>Choose the type...</h2>
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
>
<Form.Item label="option1">
<span>OPTION 1</span>
<Form.Item name="option1">
<Switch
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
defaultChecked
onChange={handleChange('option1')}
/></Form.Item>
</Form.Item>
<Form.Item label="option2">
<span>OPTION 2</span>
<Form.Item name="option2">
<Switch
checkedChildren={<CheckOutlined />}
unCheckedChildren={<CloseOutlined />}
defaultChecked
onChange={handleChange('option2')}
/></Form.Item>
</Form.Item>
<Form.Item label="save">
<Form.Item name="save">
<Button
type="primary"
onClick={this.continue}
>Save and Continue</Button>
</Form.Item>
</Form.Item>
</Form>
</div>
)
}
}
export default TypeContractIn the First Step of the form, I have a SAVE AND CONTINUE button, which causes the problem when it is clicked.
I tried adding ""strictNullChecks": true" to my tsconfig.json file and it solved one of the previous problems, but not this one.
Can anyone help me with this issue? Thanks
