이벤트 핸들러의 React 구성 요소에 대한 참조 가져오기

이벤트 핸들러의 React 구성 요소에 대한 참조 가져오기

이벤트 핸들러를 React 컴포넌트에 연결할 수 있습니다.이벤트 핸들러 내부에서 이 컴포넌트를 참조할 수 있는 방법이 있습니까?

var Foobar = React.createClass({
    action: function () {
        // ...
    },
    render: function () {
        var child = React.Children.only(this.props.children),
            props = _.omit(this.props, 'children');
        return React.addons.cloneWithProps(child, props);
    }
});

var App = React.createClass({
    handleMouseEnter: function (event) {
        // How to get reference to Foobar without using this.refs['foo']?
        // I need to call *action* on it.
    },
    render: function () {
        return (
            <div>
                <Foobar ref="foo" onMouseEnter={this.handleMouseEnter}>
                    ...
                </Foobar>
            </div>
        );
    }
});

저는 vbarosh가 하는 질문을 이해하거나 적어도 저를 이 게시물로 이끈 비슷한 질문을 가지고 있다고 생각합니다.그래서 만약 이것이 원래의 질문에 답하지 않는다면 이곳에 도착한 다른 사람들에게 도움이 될 수 있기를 바란다.

이 경우 UI 작업에 대한 구성 옵션을 정의하기 위한 n개의 자식 수를 가진 React 구성 요소가 있습니다.자녀마다 입력이 나타내는 구성 옵션을 식별하는 참조가 다릅니다.그러면 자녀 컴포넌트에 공개되어 있는 메서드를 호출할 수 있도록 직접 참조에 액세스 할 수 있게 됩니다.(데이터 속성을 공개하고 jQuery를 사용하여 추출할 수 있지만, 이것은 많은 추가 홉과 퍼포먼스 문제인 것 같습니다.)

제 첫 번째 시도는 이렇습니다.

...
<Config ref="showDetails" onChange={this.handleChange} />
<Config ref="showAvatar" onChange={this.handleChange} />
...

모든 변경 이벤트를 단일 핸들러에 바인드한 후 이벤트를 디스패치한 타깃에서 ref를 추출하는 것이 이상적입니다.아쉽게도 파견된 사람은SyntheticEvent타겟의 참조를 취득할 수 없기 때문에, 직접 콜을 발신할 수 없습니다.this.ref[name].methodIWantToCall().

React 문서에 있는 다음 문서에서 해결책을 찾을 수 있었습니다.

https://facebook.github.io/react/tips/communicate-between-components.html

JavaScript 바인딩을 활용하여 추가 인수를 전달할 수 있습니다.

...
<Config ref="showDetails" onChange={this.handleChange.bind(this, 'showDetails')} />
...

이제 핸들러에서 추가 데이터를 가져와 참조에 액세스할 수 있습니다.

handleChange: function(refName, event) {
  this.refs[refName].myMethodIWantToCall()
}

문제는 바인딩 시 인수 순서가 변경되고 첫 번째 인수가 전달된 바인딩 값이고 이벤트가 두 번째 인수가 된다는 것입니다.도움이 됐으면 좋겠네요!

다음과 같이 핸들러를 자녀 컴포넌트의 루트 요소로 전파해야 합니다.

var Foobar = React.createClass({
    action: function (e) {
        this.props.onClick(this);
    },
    render: function () {
        return <div onClick={this.action}>{this.props.children}</div>;
    }
});

var App = React.createClass({
    handleMouseEnter: function (foobar) {
       console.log(foobar);
    },
    render: function () {
        return (
            <Foobar ref="foo" onClick={this.handleMouseEnter} />
        );
    }
});

handleMouseEnter(및 onClick이 Foobar에 전달된 핸들러라는 설명)는 기본적으로 React에 의해 자동으로 바인드됩니다.App두 경우 모두 인스턴스입니다.

이 점을 염두에 두고this.refs.foo또는this.refs['foo']설명하신 문맥에서 올바르게 동작해야 하며 올바른 접근법이 될 것입니다.

앱에서 핸들러를 유지해야 하는 설득력 있는 이유가 없다고 가정할 때 보다 깔끔한 해결책은 다음과 같이 핸들러를 Foobar에 완전히 포함시키는 것입니다.

var Foobar = React.createClass({
    action: function () {
        // ...
    },
    render: function () {
        var child = React.Children.only(this.props.children),
            props = _.omit(this.props, 'children');
        return (
            <div onClick={this.action} onMouseEnter={this.action}>
                React.addons.cloneWithProps(child, props);
            </div>
        );
    }
});

var App = React.createClass({
    render: function () {
        return (
            <Foobar />
        );
    }
});

할 수 .addEventListener.

스크롤 이벤트를 사용한 예는 다음과 같습니다.

componentDidMount() {
    document.getElementById('theElementId').addEventListener('scroll', (e) => {
        this.handleScroll(e, this);
    });
}

handleScroll(event, _self) {
    // Now you can access to the element using the param _self
}

render() {
    return (
        <div id="theElementId"></div>
    )
}

하나의 은 바인드 하여 ''의 입니다.★★★★★★★★★★★★★★★★★★★★★★★★★★,this:

componentDidMount() {
    document.getElementById('theElementId').addEventListener('scroll', this.handleScroll.bind(this));
}

handleScroll(event) {
    // Now you can access to the element using the param this
}

앱 컴포넌트를 보면 다음과 같은 것을 시도해 볼 수 있습니다.

var App = React.createClass({
handleMouseEnter: function (event) {
    // reference it by using: this.refs[event._targetInst._currentElement.ref]
    // same result as calling: this.refs.foo
    console.log(this.refs[event._targetInst._currentElement.ref])
},
render: function () {
    return (
        <div>
            <Foobar ref="foo" onMouseEnter={this.handleMouseEnter}>
                ...
            </Foobar>
        </div>
        );
    }
});

이게 도움이 됐으면 좋겠다.또한 리액트 컴포넌트를 ES6 방식으로 기술/삭제하고 있습니다.이 방법은 "this"의 동작도 조금 변화시킵니다.이게 여기서도 영향을 미칠지 모르겠네요.

언급URL : https://stackoverflow.com/questions/28049603/get-reference-to-react-component-in-event-handler