反应引用-使用引用访问DOM节点

Question

I'm trying to access DOM nodes of a react component using refs. I've already seen a lot of example doing that. I decided to make my first app using React, and then I was stuck resolving this issue.

onDivHover:function()
{
    this.refs.myslider.getDOMNode().value = 20;
},

render: function() {
    return (
        <div className="sliderBox" OnMouseOver={this.onDivHover()}>
            <input ref="myslider" type="range" min={this.props.minimum} max={this.props.maximum} />
        </div>
    );
}

See, in the code I tried to change the value of slider using refs. If I comment that one line inside onDivHover , I'm able to load the app successfully. The error which is coming is React is unable to resolve myslider inside onDivHover .

This seems crazy, as I've seen many examples using that. I might be missing something very basic and important. Please help in resolving this.

Answer 1

React事件需要一个函数，因此您应该传递一个引用，而不是执行它：

onMouseOver={this.onDivHover}