Question

我正在使用反应。我不太清楚如何编写事件处理，所以当我点击a时，我可以提醒data-href。现在，如果我点击div或img，它将触发一个事件，但由于目标实际上不是a，它将提醒null，这不是我想要的。

test(e){alert(e.target.getAttribute('data-href'))}
<div>
  <ui>
    <li >
      <a data-href = 'http://cnn.com'  onClick = {e = > this.test(e)>
          <div>
            <img src = 'someimage.jpg'}>
            hi there
          </div>
      </a>
    <li>
  </ui>
</div>

编辑：

像这样的东西 conversationList（）＆amp; selectConversation（）就是我在这里谈论的内容〜

import React from 'react';
import { connect, Provider } from 'react-redux';
import fetch from 'isomorphic-fetch';
import * as actions from './actions/index';

import io from 'socket.io-client';


class Chat extends React.Component{ 
    constructor(props){
        super(props);
        this.state = {recipientId: '', messageBuffer:'asdfadsfasdf'};
        this.userList = this.userList.bind(this);
        this.changeRecipient = this.changeRecipient.bind(this);
        this.insertText = this.insertText.bind(this);
    }
    componentWillMount(){
        this.props.loadConversationsSocket();
        this.props.loadConversations();
        this.props.loadRecipients();
    }



    participantsNames(participants){
        console.log('in par ');
        console.log(participants);  
        return participants.map(participant => (<div key= {participant._id}>{participant.name}</div>));
    }

    selectConversation(e){
        e.preventDefault();
        console.log(this.tagName);
        let data = this.getAttribute('data-href');
        alert(data);
    }

    conversationList(){
        if(!(this.props.conversations.length === 0)){
            console.log('in conversation if');


            return this.props.conversations.map(conversation =>(<li key = {conversation.conversation._id} >
                <a data-href = {'http://localhost:8000/messaages/'+conversation.conversation._id} onClick = {(e)=>this.selectConversation(e)}>
                    <div>
                        participants: {this.participantsNames(conversation.conversation.participants)}
                    </div> 
                    <div>
                        {conversation.message[0].auther}
                        {conversation.message[0].body}
                    </div>
                </a>

            </li>))
        }
    }



    render(){

        return (
            <div>
                <ul>
                    {this.conversationList()}
                </ul>
            </div>)
    }


}

function mapStateToProps(state) {  
    return { recipients: state.recipients, conversations: state.conversations};
}

export default connect(mapStateToProps, actions)(Chat);

Answer 1

您的onClick处理程序已附加到img，而不附加到a。这是第一个问题。

然后，您应该更新代码以查询event.currentTarget。

event.currentTarget - 在事件遍历时标识事件的当前目标 DOM。它总是指事件处理程序所在的元素已被附加，而不是event.target标识事件发生的元素。

您应该像这样编写事件处理程序：

class Hello extends React.Component {

  test(e){
   alert(e.currentTarget.getAttribute('data-href'))
  }

  render() {
    return (
        <div>
          <a onClick={this.test} data-href="foo">
            <img src="https://vignette.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" />
            <div>clickMe</div>
          </a>
        </div>
    );
  }
}

我建议您阅读有关处理事件的this article。

反应 - 事件冒泡

1 个答案: