The click event in the react project has no effect, and there is no error reported in the console.

Code address

ineffective code

export default class User extends Component {
  logout() {
    console.log(1)
        const alert = Modal.alert
        alert("", "???", [
              { text: "", onPress: () => console.log("cancel") },
              { text: "", onPress: () => {
                  browserCookie.erase("userid")
                  this.props.logoutSubmit()
              }}
            ])
  }
  render() {
        const props = this.props
        const Item = List.Item
        const Brief = Item.Brief    
    return props.user ? (
      <div>
        <Result
          img={<img src={require(`../img/${props.avatar}.png`)} tyle={{ width: 50 }} alt="" />}
          title={props.user}
          message={props.type === "boss" ? props.company : null}
        />
                <List renderHeader={()=>""}>
            <Item multipleLine>
              {props.title}
              {props.desc.split("\n").map(v=><Brief key={v}>{v}</Brief>)}
              {props.money?<Brief>:{props.money}</Brief>:null}
            </Item>          
        </List>
                <WhiteSpace></WhiteSpace>
                <List>
          <Item onClick={() => this.logout()}></Item>
        </List>  
      </div>
    ) : <Redirect to={props.redirectTo} />
  }
}

it"s a strange problem, and I don"t know why. Now it doesn"t work even if you add a click event to other files. The console neither prints nor reports an error

.
Mar.03,2021

take a closer look at the style, and you will find that there is an element with clss as am-tab-bar that obscures the entire screen. This element is so high-level that it obscures other page elements, so the event will not take effect when you click. You can set the z-index of this class to-1 to solve


<Item onClick={() => this.logout()}></Item>

do you write () = > this.logout () when props is passed to Item, is onClick called in Item


or onClick doesn't execute at all

The

or Item component does not have a callback for onClick .


I have also encountered this problem. Have you solved it


The item of the list of

antd does not support registering onclick events. You need to register
Edit m77xjo3pp9

for the child elements in the Item.

Click clickme to see

The reason for

is that other elements cover the button, and you can change the inheritance in the z-index attribute value of this element


es6. Don't you need to explicitly call the constructor of the parent class to generate this?

Menu