Search code examples
reactjstypescriptantdant-design-pro

React typescript for added antdesign (antd) modal not working


Im tried to put my React typescript application for Ant design Modal, but its not working correctly, anyone know how to put hat concretely on react typescript

i got a this folwling error

Parameter 'e' implicitly has an 'any' type.  TS7006

    11 |     };
    12 |
  > 13 |     handleOk = e => {
       |                ^
    14 |         console.log(e);
    15 |         this.setState({
    16 |             visible: false,

My code here

import * as React from 'react';
import { Modal, Button } from 'antd';

class Uni extends React.Component {

    state = { visible: false };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    handleOk = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    public render () {
        return(
            <div>
                <Button type="primary" onClick={this.showModal}>
                    Open Modal
                </Button>
                <Modal
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
            </div>
        )
    }
}
export default Uni;

Solution

  • The fix is simply to give it a type, in TypeScript you cannot have implicit any types.

    HandleOK = (e: any) => { ... }

    And instead of any you can look up The typescript type for an event like that, not sure what the correct one is on the top of my head