React：是否可以访问DOM元素的道具？

Question

我很新来做出反应。 我注意到许多人this绑定到其DOM的element函数。

假设我有一个组件：

render(){
    <div>
        <button onClick={this.doSomething.bind(this)} test={someObj}></button>
    </div>
}

doSomething(){
    this.props.whatever();
}

现在，在我的脑海里它由具有意义this绑定到this.doSomething ，否则this将是按钮组件对象，并且this.props是相对于按钮的道具，这是我不想要的。

因此，我陷入了一种想从按钮的道具（ test对象）中得到一些东西的情况。 我想我可以做的是：从通话中删除bind(this) ，所以this.props将是按钮的道具。 但是，当我this.doSomething不使用绑定的情况下调用this.doSomething时， this将返回null（也许我以某种方式搞砸了）。

我猜那我的逻辑是有缺陷的。 我想知道this绑定到处理程序的真正目的是什么，以及是否有一种方法可以访问DOM元素的道具（或者至少如何在示例中获得test ）

Answer 1

点击处理程序会传递一个SyntheticEvent ，您可以通过该事件访问DOM节点

doSomething(event) {
    console.log(event.target.getAttribute('data-test'));
}

另外，您可以给DOM元素一个参考

<button data-test={someObj} ref="myButton" />

并作为访问

doSomething() {
    console.log(this.refs.myButton)
}

但是实际上，您不应该将DOM用作数据库，而应该存储任何数据以供以后在组件状态下使用。

编辑：

对于此处评论中说明的用例，我将执行以下操作：

class MyButton extends React.Component {
    handleClick() {
        this.props.foo(this.props.id);
    }
    render() {
        return (
            <div>
                <button 
                    onClick={this.handleClick.bind(this)}
                >
                    Click {this.props.id}
                </button>
            </div>
        );
    }
}


class TestComponent extends React.Component {
    foo(id) {
        console.log(id);
    }
    render() {
        const objs = [{id:1},{id:2}];
        return (
            <div>
                {objs.map(obj => (<MyButton key={obj.id} id={obj.id} foo={this.foo}/>))}
            </div>
        );
    }
}

在这里，我们为按钮创建了一个自定义组件，并将我们的数据与DOM隔离，并保留在该组件的属性中。

Answer 2

您可以按以下方式在按钮中存储数据值：

 render(){
<div>
    <button  data-value="item1" onClick={this.doSomething.bind(this)} test={someObj}></button>
</div>

}

并使用此访问：

doSomething(event){
console.log(event.target.dataset.value)
this.props.whatever();
}