如何在单击处理程序中获取与event.target元素对应的react组件实例?

时间:2017-01-11 20:24:16

标签: javascript reactjs

这是我的反应组件类

class TestInstance extends React.Component {
    onClick(e) {
        //When the user clicks in the button, 
        //I need to read the custom-id property here
    }

    render() {
        return (
            <Wrapper onClickCapture={this.onClick}>
                <div>
                    <button custom-data={{test: 'test data'}}>Click Me</button>
                </div>
            </Wrapper>
        );
    }
}

这里我正在收听包装器节点下发生的所有点击事件。每当发生点击时,我需要找出与e.target相关联的反应组件实例以及该实例的custom-data道具的值。 custom-data道具会有多个这样的孩子具有不同的价值。每当点击这样一个元素时,我想要为它的custom-data prop提取该元素的值做一些事情。在reactjs中执行此操作的最佳方法是什么?一种方法是导航整个子树,并将e.target实例与每个子元素的DOM元素共同构成标识。我还发现e._targetInst._currentElement.props给了我道具的价值。但我不知道这些无证变量有多可靠。有没有任何形成文件的解决方案?基本上我正在寻找一些让我与ReactDOM.findDOMNode相反的东西。我已经有了一个DOM节点,我需要与之相关的React元素。

3 个答案:

答案 0 :(得分:2)

正如我在上面的评论中提到的,如果你打电话给道具use std::sync::{Arc, Mutex}; use std::io::Write; //This is the important bit struct Foobar<T: Write + Send> { stream: Arc<Mutex<T>>, } impl<T: Write + Send> Foobar<T> { pub fn new(stream: T) -> Foobar<T> { Foobar { stream: Arc::new(Mutex::new(stream)) } } } trait Test: Write + Send {} //verify that Foobar is Send + Sync impl<T: Write + Send> Test for Foobar<T> { } 而不是data-custom-id,这会容易得多。这样它将呈现为DOM属性,您可以通过调用custom-id来获取其值。您可以在下面的代码段中看到它。 (由于您没有向我们展示Wrapper组件的代码,我对实现进行了猜测。)

&#13;
&#13;
e.target.getAttribute('data-custom-id')
&#13;
class Wrapper extends React.Component {
  componentDidMount() {
    this.refs.wrap.addEventListener('click', this.props.onClickCapture, true);
  }
  componentDidUnmount() {
    this.refs.wrap.removeEventListener('click', this.props.onClickCapture);
  }
  render() {
    return <div ref="wrap">{this.props.children}</div>;
  }
}

class TestInstance extends React.Component {
  onClick(e) {
    console.log('Clicked %s', e.target.getAttribute('data-custom-id'));
  }

  render() {
    return (
      <Wrapper onClickCapture={this.onClick}>
        <div>
          <button data-custom-id="btn-1">Button 1</button>
          <button data-custom-id="btn-2">Button 2</button>
        </div>
      </Wrapper>
    );
  }
}

ReactDOM.render(<TestInstance/>, document.getElementById('root'));
&#13;
&#13;
&#13;

答案 1 :(得分:0)

保存引用并检查e.target是否与ref

相同
class TestInstance extends React.Component {
    element = null;

    onClick(e) {
        //When the user clicks in the button, 
        //I need to read the custom-id property here
        if (e.target === ReactDOM.findDOMNode(element)) {
          // get custom id here
        }
    }

    render() {
        return (
            <Wrapper onClickCapture={this.onClick}>
                <div>
                    <button ref={e => this.element = e} custom-id="btn">Click Me</button>
                </div>
            </Wrapper>
        );
    }
}

答案 2 :(得分:-1)

&#13;
&#13;
class Wrapper extends React.Component {
  render() {
    return (
      <div>
       <button onClick = {()=>this.props.onCapture({'id':'1','name':'btn-1'})}>Button 1</button>
       <button onClick = {()=>this.props.onCapture({'id':'2','name':'btn-2'})}>Button 2</button>
        </div>
    )
  }
}

class TestInstance extends React.Component {
  onClick(expr) {
    console.log(expr);
    //console.log('Clicked %s', e);
  }

  render() {
    return (
      <Wrapper onCapture={this.onClick}/>
    );
  }
}

ReactDOM.render(<TestInstance/>, document.getElementById('root'));
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root" />
&#13;
&#13;
&#13;