Получение ссылки на объект dom для доступа к нему в React

Question

Я играю с компонентами, которые живут сами по себе, со стилем и взаимодействием внутри компонента. Я пытаюсь запустить анимацию на определенном событии мыши, я просто играю сейчас, так что игнорируйте беспорядок. Я могу установить состояние для того, чтобы позже получить ссылку на dom-узел, но когда я пытаюсь вызвать функцию для затем tween-анимации, TweenLite считает, что узел для tween-узла является нулевым.

Какие-нибудь мысли?

Благодарю.

Да, и когда я специально передаю ссылку в качестве свойства при вызове функции, функция запускается, как только загружается компонент.

import React, {Component, PropTypes} from 'react';
var ReactDOM = require('react-dom');
var Stylesheet = require('react-style');

export default class Card extends Component {
    constructor(props) {
        super(props);
        //  Set state here if required.
        this.state = {Width: this.props.width, Height: this.props.height, cHeader:''};
    }

    componentDidMount() {
        //  This method is called when an instance of this component is created.
        console.log('New Card instance created.');
        this.setState({
            cHeader: this.refs.cardHeader
        });
    }

    render() {

        return (
            <div styles={[styles.card]}>
                <div ref="cardHeader" styles={[styles.cardHeader]} onClick={handleHeaderMouseEnter}></div>
            </div>
        )
    }
}

Card.propTypes = {width: React.PropTypes.number, height: React.PropTypes.number};
Card.defaultProps = {width: 350, height: 150};

function handleHeaderMouseEnter() {
    console.log("Did this run?");
    TweenLite.to(this.state.cHeader, 1, {css:{height:350}, ease:Power4.easeInOut});
}

var styles = Stylesheet.create({
    card: {
        overflow: 'hidden',
        width:350,
        height: 250,
        backgroundColor: '#E74C3C',
        borderRadius: 5,
        WebkitBoxShadow: "3px 3px 4px 1px rgba(196,196,196,1)",
        marginBottom: 25
    },
    cardHeader: {
        width: 350,
        height: 50,
        borderTopLeftRadius: 5,
        borderTopRightRadius: 5,
        backgroundColor: '#3498DB'
    }
})

Я обновил код, как показано ниже, до сих пор нет радости. TweenLite все еще пытается найти узел DOM.

export default class Card extends Component {
    constructor(props) {
        super(props);
        //  Set state here if required.
        this.state = {Width: this.props.width, Height: this.props.height, cHeader:''};
    }

    componentDidMount() {
        //  This method is called when an instance of this component is created.
        console.log('New Card instance created.');
        this.setState({
            cHeader: (this.refs.cardHeader)
        });
    }

    render() {

        return (
            <div styles={[styles.card]}>
                <div ref="cardHeader" styles={[styles.cardHeader]} onClick={this.handleHeaderMouseEnter}></div>
            </div>
        )
    }

    handleHeaderMouseEnter() {
        console.log("Did this run?");
        TweenLite.to(React.findDOMNode(this.state.cHeader), 1, {css:{height:350}, ease:Power4.easeInOut});
    }
}

Answer 1

В вашем случае вы звоните handleHeaderMouseEnter вне класса Card в этой функции this относится к глобальной области видимости (в браузере это window), И в window нет собственности state - это undefined, Вы должны связать this к этой функции

onClick={ handleHeaderMouseEnter.bind(this) }

также если вы двигаетесь handleHeaderMouseEnter в класс вам также нужно установить this к этому методу,

onClick={ this.handleHeaderMouseEnter.bind(this) }

Example

Answer 2

Я думаю, что Tween ожидает DOM-узел, и вы передаете ему реагирующий компонент. Попробуй это:

TweenLite.to(React.findDOMNode(this.state.cHeader), 1, {css:{height:350}, ease:Power4.easeInOut});

Answer 3

Это решило это:

<div ref="cardHeader" styles={[styles.cardHeader]} onClick={this.handleHeaderMouseEnter.bind(this)}></div>