Why doesn't the onClick () event that is added to the extra element by dropdownRender in the Antd < Select / > component take effect?

problem description

Antd component uses dropdownRender to customize the drop-down box content, the onClick () event added to the extra element has no effect, or is not sensitive (clicking 10 may take effect once).

anyone who has used Antd has a look. Wait online. Hurry!

the environmental background of the problems and what methods you have tried

background (demand scenario):

sometimes when using the drop-down box component selection, if you don"t have the desired choice, you can add a add button at the bottom to create new data, as shown in the following figure:

tried method:

  1. see dropdownRender in API. The receiving method has a second parameter, props (menuNode: ReactNode, props) = > ReactNode . After trying to use it, it is found that the following redundant code console.log () must be included in the element to take effect, as follows
  2. has considered writing extra elements in a function component and passing props; to prevent time bubbles; checking to see if there are previous attributes in API that can be controlled, and so on.
  3. guess that may be when clicking, unless you click on one of the Option options, the rest of the click is the event of the hidden drop-down box that is called, that is, the hidden event of the drop-down box prevents the event written by yourself.
 -< / td >
< / tr > < / tbody >
< / table >
						
May.31,2022

can be regarded as a small bug of antd . You can make the click event take effect by blocking the default behavior of the event

<div
    onMouseDown={(e) => { e.preventDefault(); return false; }}
  >
  <Select
    defaultValue="lucy"
    style={{ width: 120 }}
    dropdownRender={(menu, props) => (
      <div>
        {menu}
        <Divider style={{ margin: "4px 0" }} />
        <div
          style={{ padding: "8px", cursor: "pointer" }}
          onClick={() => {
            console.log("Add item onClick...");
          }}
        >
          <Icon type="plus" /> Add item
        </div>
      </div>
    )}
  >
    <Option value="jack">Jack</Option>
    <Option value="lucy">Lucy</Option>
  </Select>
  </div>

just add a div to the outer layer of the component, add the onMouseDown event, and then block the default behavior of the event.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bd0b8a-30566.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bd0b8a-30566.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?