I have a drop down in my form (<https://ant.design/components/select>). In this select drop down I have the onChange to call a function. Inside 'onChange' I want to pass the event as a parameter to my function. The problem is: when the onChange occurs, only the selected value is passed, but I want the entire event. 

**Here is the code:** 

```
export default class MyForm extends Component {
    constructor() {
        super();

        this.handleOnChange = this.handleOnChange.bind(this);
    }

    handleOnChange = (event) => {
        console.log(event); // here I'm receiving only the value selected (1 or 2)
    }

    render() {
        render(
           <Form>
              <Select onChange={this.handleOnChange}>

                      <Option value="1">text 1</Option>
                      <Option value="2">text 2</Option>
              </Select>
           </Form>
        )
    }
}

```

In the console.log() I'm receiving only the selected value. Is there a way to pass the entire event object to the function handleOnChange()?
['https://Stackoverflow.com/questions/45684925', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4956634/']
I found a solution. Just use: onSelect(), passing the value and the event. 

```
handleOnChange = (value, event) => {
        ...code here        
}

    render() {
        render(
           <Form>
              <Select onSelect={(value, event) => this.handleOnChange(value, event)}>

                      <Option value="1">text 1</Option>
                      <Option value="2">text 2</Option>
              </Select>
           </Form>
        )
    }

```
The `Select` component that you use is the one that handle the `onChange` and call your "outer" function.

What you can try is use the synthetic event variable inside your function, it might work:

```
handleOnChange = (selectedValue) => {
    console.log(selectedValue); // The value from the inner component
    console.log(event); // usually you have access to this variable
}

```