这是我的反应组件类
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元素。
答案 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组件的代码,我对实现进行了猜测。)
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;
答案 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)
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;