在react-select中尝试获取event，不确定操作是否有误？

Hey there! Let's break down how to handle events properly with react-select, since it looks like you might be mixing up the parameters the onChange prop receives.

First, let's clear up a key point from the react-select docs: the onChange prop accepts a function that takes two arguments:

• The first is the selected value(s)
• The second is an actionMeta object (not a native DOM event)

This actionMeta object includes details like the action type (e.g., 'change', 'clear'), the name prop of the select, and the related option, but it doesn't include the raw browser event. That's probably why you're having trouble accessing the event object!

If you need the native DOM event, here are two reliable approaches: #

1. Use onInputChange instead

The onInputChange prop is designed to track changes to the select's input field, and its second argument includes the native event. Here's how to use it:

import Select from 'react-select';

function MySelect() {
  const handleInputChange = (inputValue, { event }) => {
    // Now you can access the native event here!
    console.log('Native event:', event);
  };

  return (
    <Select
      options={[/* your option list */]}
      onInputChange={handleInputChange}
    />
  );
}

2. Access the event via actionMeta.target (limited use case)

If you specifically need an event tied to the onChange action, you can sometimes get the underlying DOM element from actionMeta.target, then interact with events related to it. But this is less straightforward than using onInputChange, and it's not guaranteed to work for all action types.

Fixing your existing code #

If you were trying to use onChange to get the event, adjust your approach to use onInputChange instead. For example, if your original code looked like this:

// This won't work as expected - the second arg is actionMeta, not event
const handleChange = (value, event) => {
  console.log(event); // This will be the actionMeta object, not the DOM event
};

Swap it out for the onInputChange pattern above, and you'll get the native event you need.

内容的提问来源于stack exchange，提问作者Azad Rahman