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 >
Antd react.js
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.

Previous: Swagger page opening problem

Next: A permutation and combination algorithm problem

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu