Question

我很擅长做出反应。我注意到很多人将this绑定到他们的DOM元素函数中。

我们说我有一个组件：

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

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

现在，在我看来，将this绑定到this.doSomething是有道理的，因为否则this将是按钮组件对象，而this.props将相对于按钮＆＃39; s道具，这是我不想要的东西。

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

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

Answer 1

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

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

或者，您可以为DOM元素指定reference

<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();
}

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

2 个答案: