react 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のデータのいずれかを取得したい場合は要素を追加するとき、あなただけのイベント関数の呼び出しで追加することもできます。あなたがのonClickでclassTypeにアクセスしたいと言う：

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

ほとんど（またはReduxの私はそれがあなたのものかどう推測）コンポーネントの状態でliクラス名や状態を保存することですこれを行う方法を「反応しFUL」クリックハンドラを使用して変更します。

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

あなたはES6を使用している場合はclickHandlerに「これ」スコープを（this.setStateへのアクセスを得るために）バインドする必要があり注意。