Как получить доступ к узлу элемента в реакции redux

Question

Как получить доступ к элементу li в обработчике кликов для добавления класса при нажатии?

const Type = React.createClass({ 
    clickHandler: function() { 
    ... 
    }, 
    render() { 
    const classType = `cell type type-${this.props.name}` 
    return (
     <li 
     onClick={this.clickHandler} 
     className={classType} 
     > 
     {this.props.name} 
     </li> 
    ) 
    } 
}) 

Answer 1

Если вы хотите получить какой-либо из данных li можно просто добавить в вызове функции события при добавлении элемента. Допустим, вы хотите получить доступ к classType в OnClick:

const Type = React.createClass({ 
    clickHandler: function (classType) { 
    /* Do something with the li classType */ 
    }, 
    render() { 
    const classType = `cell type type-${this.props.name}` 
    return (
     <li 
     onClick={() => this.clickHandler(classType)} 
     className={classType} 
     > 
     {this.props.name} 
     </li> 
    ) 
    } 
}) 

Answer 2

Наиболее «Реагировать-FUL» способ сделать это было бы хранить имя li класса или статус в компоненте состояния (или Redux я думаю, если это ваше дело) и изменить его с помощью обработчика кликов.

const Type = React.createClass({ 
    clickHandler: function() { 
    this.setState({wasClicked: true}); 
    }, 
    render() { 
    const classType = `cell type type-${this.props.name}` + (this.state.wasClicked ? " some-new-class-name" : " ") 
    return (
     <li 
     onClick={this.clickHandler.bind(this)} 
     className={classType} 
     > 
     {this.props.name} 
     </li> 
    ) 
    } 
}) 

Обратите внимание, что вы должны связать «эту» сферу для clickHandler (чтобы получить доступ к this.setState), если вы используете ES6.