Javascript React：是否可以访问DOM元素'；什么道具？

我还没反应过来。我注意到许多人将

这个
绑定到他们的DOM元素函数

假设我有一个组件：

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

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

render（）{
}
doSomething（）{
this.props.whatever（）；
}

现在，在我看来，将
this
绑定到
this.doSomething
是有意义的，因为否则
this
将是按钮组件对象，this.props将与按钮的props相关，这是我不想要的

因此，我陷入了一种情况，我想从按钮的道具（测试对象）中得到一些东西。我想我能做的是：从调用中删除
bind（this）
，这样
this.props将成为按钮的道具。但是当我在不使用bind的情况下调用
this.doSomething
时，
this
返回空值（可能是我搞砸了）

我想我的逻辑是有缺陷的。我想知道将
this
绑定到处理程序的真正目的是什么，以及是否有一种方法可以访问DOM元素的道具（或者至少，我如何在示例中获得
测试
）
您可以按如下方式在按钮中存储数据值：

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

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

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

单击处理程序将传递一个消息，您可以通过该事件访问DOM节点

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

或者，您可以给DOM元素一个

但实际上，您不应该将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>
        );
    }
}

class MyButton扩展了React.Component{
handleClick（）{
this.props.foo（this.props.id）；
}
render（）{
返回(
单击{this.props.id}
);
}
}
类TestComponent扩展了React.Component{
傅（id）{
console.log（id）；
}
render（）{
常量objs=[{id:1}，{id:2}]；
返回(
{objs.map（obj=>（））}
);
}
}

在这里，我们为按钮创建了一个自定义组件，并将数据远离DOM，而是放在该组件的道具中。
单击处理程序将传递一个消息，您可以通过该事件访问DOM节点

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

或者，您可以给DOM元素一个

但实际上，您不应该将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>
        );
    }
}

class MyButton扩展了React.Component{
handleClick（）{
this.props.foo（this.props.id）；
}
render（）{
返回(
单击{this.props.id}
);
}
}
类TestComponent扩展了React.Component{
傅（id）{
console.log（id）；
}
render（）{
常量objs=[{id:1}，{id:2}]；
返回(
{objs.map（obj=>（））}
);
}
}

在这里，我们为按钮创建了一个自定义组件，并将数据远离DOM，而放在该组件的道具中。
event.target.getAttribute（'test'）
仍然给我空值。问题是，在我的例子中，我有一个动态生成的列表，当它单击一个元素时，我想获取他的“key”或其他内容。所以我不能通过ref得到它，因为它是动态的。我想我可以用
onClick={this.doSomething.bind（null，key）}
绑定key属性，但是听起来ugly@GBarroso正确的。。如果没有
data-
前缀，react可能无法将其呈现到dom中。它起作用了。我会更新答案的。是的，就是这样。现在它开始工作了。但是对于我描述的情况，你有更聪明的解决方案吗？使用
event.target
对我来说有点不方便，但我想如果有更漂亮的东西，你可以做的是将列表中的元素变成一个自定义组件，然后将其id作为道具传递给它，还可以传递回调。在该组件中，为按钮添加一个
onClick
处理程序，并在该处理程序中调用以id作为参数传递的回调。我就是这么做的。
event.target.getAttribute（'test'）
仍然给我空值。在我的例子中，我有一个动态生成的列表，当它单击一个元素时，我想获取他的“键”或其他东西。所以我不能通过ref得到它，因为它是动态的。我想我可以用
onClick={this.doSomething.bind（null，key）}
绑定key属性，但是听起来ugly@GBarroso正确的。。如果没有
data-
前缀，react可能无法将其呈现到dom中。它起作用了。我会更新答案的。是的，就是这样。现在它开始工作了。但是对于我描述的情况，你有更聪明的解决方案吗？使用
event.target
对我来说有点不方便，但我想如果有更漂亮的东西，你可以做的是将列表中的元素变成一个自定义组件，然后将其id作为道具传递给它，还可以传递回调。在该组件中，为按钮添加一个
onClick
处理程序，并在该处理程序中调用以id作为参数传递的回调。这就是我要做的。您是否使用ES6？pass event作为doSomething（event）的参数是的，我正在传递事件。数据集正在返回一个空的
DOMStringMap{}
My bad。我没有看到你说它应该是
数据-
值。我试着用测试，没用，但数据测试用了。感谢您接受您的申请，因为您在ivarni之前就谈到了
数据-
，但感谢您使用ES6？pass event作为doSomething（event）的参数提供的帮助是的，我正在通过事件。数据集是returni