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

user_4956634 0
Viewed 17705

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

reactjs javascript
3 Answers

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!")}
>
user_16653550
Related