React JS: Pass event inside onChange drop down (Ant Design)

Question

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()?

Answer 1

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>
        )
    }

Answer 2

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
}

Answer 3

Try this, if you dont want to bind in callback in Select onSelect/onChange:

toggleActive = name => event => {
  console.log("name: ",name) // prints "name: Active!"
  console.log("event: ",event) // event is some data
}

<Select
 mode="multiple"
 style={{ width: '91%' }}
 placeholder="Stuff"
 value={this.props.value}
 onChange={this.toggleActive("Active!")}
>